Merge pull request #85 from Exabyte-io/feature/SOF-4598

Feature/sof 4598

package.json

@@ -34,7 +34,7 @@
         "@babel/runtime": "7.16.7",
         "@babel/runtime-corejs2": "7.16.7",
         "@exabyte-io/made.js": "2022.5.5-3",
-        "@exabyte-io/wave.js": "2022.8.8-0",
+        "@exabyte-io/wave.js": "2022.8.9-0",
         "@material-ui/core": "^4.12.3",
         "@material-ui/icons": "^4.11.2",
         "@uiw/react-codemirror": "^3.2.7",

tests/cucumber/features/3d-editor/multiple-selection-cancel.feature

@@ -0,0 +1,42 @@
+Feature: User can cancel active multiple selection and all changes should be reverted
+
+  Scenario:
+    When I open materials designer page
+    And I create materials with the following data
+      | name      | basis             |
+      | supercell | Si 0 0 0;Si 0 0 0 |
+    And I open multi-material 3D editor
+
+    # set default positions for easier expectations calculations
+    And I toggle scene object "supercell" opener inside 3D editor
+    And I toggle scene object "Atoms" opener inside 3D editor
+    And I select scene object "Si-0" inside 3D editor
+    And I set position of scene object with the following data:
+      | x    | y    | z    |
+      | -1.0 | -1.0 | -1.0 |
+    And I select scene object "Si-1" inside 3D editor
+    And I set position of scene object with the following data:
+      | x   | y   | z   |
+      | 1.0 | 1.0 | 1.0 |
+
+    # select atoms and move them a bit
+    And I click on "Toggle Multiple Selection" toolbar button
+    And I make multiple-selection with the following coordinates:
+      | x1           | y1           | x2          | y2          |
+      | $FLOAT{-0.5} | $FLOAT{-0.5} | $FLOAT{0.5} | $FLOAT{0.5} |
+    And I set position of scene object with the following data:
+      | x   | y   | z   |
+      | 1.0 | 1.0 | 1.0 |
+
+    # cancel multiple selection
+    And I click on "Cancel Multiple Selection" toolbar button
+
+    # expect that atoms have initial positions and weren't changed
+    And I select scene object "Si-0" inside 3D editor
+    Then I see that scene object has the following position:
+      | x            | y            | z            |
+      | $FLOAT{-1.0} | $FLOAT{-1.0} | $FLOAT{-1.0} |
+    And I select scene object "Si-1" inside 3D editor
+    Then I see that scene object has the following position:
+      | x            | y            | z            |
+      | $FLOAT{1.0}  | $FLOAT{1.0}  | $FLOAT{1.0}  |

tests/cucumber/features/3d-editor/multiple-selection-submit.feature

@@ -0,0 +1,42 @@
+Feature: User can select multiple atoms, move them and update their positions accordingly
+
+  Scenario:
+    When I open materials designer page
+    And I create materials with the following data
+      | name      | basis             |
+      | supercell | Si 0 0 0;Si 0 0 0 |
+    And I open multi-material 3D editor
+
+    # set default positions for easier expectations calculations
+    And I toggle scene object "supercell" opener inside 3D editor
+    And I toggle scene object "Atoms" opener inside 3D editor
+    And I select scene object "Si-0" inside 3D editor
+    And I set position of scene object with the following data:
+      | x    | y    | z    |
+      | -1.0 | -1.0 | -1.0 |
+    And I select scene object "Si-1" inside 3D editor
+    And I set position of scene object with the following data:
+      | x   | y   | z   |
+      | 1.0 | 1.0 | 1.0 |
+
+    # select atoms and move them a bit
+    And I click on "Toggle Multiple Selection" toolbar button
+    And I make multiple-selection with the following coordinates:
+      | x1           | y1           | x2          | y2          |
+      | $FLOAT{-0.5} | $FLOAT{-0.5} | $FLOAT{0.5} | $FLOAT{0.5} |
+    And I set position of scene object with the following data:
+      | x   | y   | z   |
+      | 1.0 | 1.0 | 1.0 |
+
+    # submit multiple selection
+    And I click on "Submit Multiple Selection" toolbar button
+
+    # expect that atoms' positions were changed
+    And I select scene object "Si-0" inside 3D editor
+    Then I see that scene object has the following position:
+      | x           | y           | z           |
+      | $FLOAT{0.0} | $FLOAT{0.0} | $FLOAT{0.0} |
+    And I select scene object "Si-1" inside 3D editor
+    Then I see that scene object has the following position:
+      | x           | y           | z           |
+      | $FLOAT{2.0} | $FLOAT{2.0} | $FLOAT{2.0} |

tests/cucumber/support/selectors.js

@@ -65,12 +65,15 @@ export const SELECTORS = {
     },
     threeJSEditorWidget: {
         wrapper: "#threejs-editor",
+        viewport: "#threejs-editor #viewport",
         menuByTitle: (title) => `//div[@class="menu"] //div[starts-with(text(),"${title}")]`,
         menuItemByTitle: (title) => `//div[@class="menu"] //div[@class="options"] //div[starts-with(text(),"${title}")]`,
         sceneObjectByName: (name) => `//div[@class="Outliner"] //div[@class="option" and starts-with(text()," ${name}")]`,
+        sceneObjectOpenerByName: (name) => `//div[@id="outliner"] //div[contains(@class,"option") and text() = " ${name}"] //span[contains(@class,"opener")]`,
         sidebarTabByTitle: (title) => `//div[@id="sidebar"] //div[@id="tabs"] //span[starts-with(text(),"${title}")]`,
         sceneObjectTabByTitle: (title) => `//div[@id="sidebar"] //span //div[@id="tabs"] //span[starts-with(text(),"${title}")]`,
         sceneObjectPositionByIndex: (index) => `//div[@id="sidebar"] //div[@class="Panel"] //div[@class="Row"] //span[starts-with(text(), "Position")]/following-sibling::input[${index}]`,
+        toolbarBtnByTitle: (title) => `//div[@id="toolbar"] //button //img[contains(@title,"${title}")]`,
     },
     modalBackdrop: '.modal-backdrop.fade',
 };

tests/cucumber/support/step_definitions/Then I see that scene object has the following position.js

@@ -0,0 +1,15 @@
+import assert from "assert";
+import isEqual from "lodash/isEqual";
+import {parseTable} from "../utils/table";
+import {materialDesignerPage} from "../widgets/material_designer_page";
+
+export default function () {
+    this.Then(/^I see that scene object has the following position:$/, function (table) {
+        const config = parseTable(table, this)[0];
+        const expectedPosition = [config.x, config.y, config.z];
+        const sceneObjectPosition =
+            materialDesignerPage.designerWidget.threeJSEditorWidget.getSceneObjectPosition();
+
+        assert(isEqual(sceneObjectPosition, expectedPosition));
+    });
+}

tests/cucumber/support/step_definitions/When I click on # toolbar button.js

@@ -0,0 +1,7 @@
+import {materialDesignerPage} from "../widgets/material_designer_page";
+
+export default function () {
+    this.Then(/^I click on "([^"]*)" toolbar button$/, function (title) {
+        materialDesignerPage.designerWidget.threeJSEditorWidget.clickOnToolbarButton(title);
+    });
+}

tests/cucumber/support/step_definitions/When I make multiple-selection with the following coordinates.js

@@ -0,0 +1,9 @@
+import {parseTable} from "../utils/table";
+import {materialDesignerPage} from "../widgets/material_designer_page";
+
+export default function () {
+    this.When(/^I make multiple-selection with the following coordinates:$/, function (table) {
+        const coordinates = parseTable(table, this)[0];
+        materialDesignerPage.designerWidget.threeJSEditorWidget.makeMultipleSelection(coordinates);
+    });
+}

tests/cucumber/support/step_definitions/When I toggle scene object # opener inside 3D editor.js

@@ -0,0 +1,7 @@
+import {materialDesignerPage} from "../widgets/material_designer_page";
+
+export default function () {
+    this.When(/^I toggle scene object "([^"]*)" opener inside 3D editor$/, function (sceneObjectName) {
+        materialDesignerPage.designerWidget.threeJSEditorWidget.toggleSceneObjectOpener(sceneObjectName);
+    });
+}

tests/cucumber/support/widgets/threejs_editor_widget.js

@@ -7,36 +7,110 @@ import {SELECTORS} from "../selectors";
 export class ThreeJSEditorWidget extends Widget {
     constructor(selector) {
         super(selector);
-        this._selectros = SELECTORS.threeJSEditorWidget;
+        this._selectors = SELECTORS.threeJSEditorWidget;
     }
 
     clickOnMenuItem(menuTitle, menuItemTitle) {
-        exabrowser.scrollAndClick(this._selectros.menuByTitle(menuTitle));
-        exabrowser.scrollAndClick(this._selectros.menuItemByTitle(menuItemTitle));
+        exabrowser.scrollAndClick(this._selectors.menuByTitle(menuTitle));
+        exabrowser.scrollAndClick(this._selectors.menuItemByTitle(menuItemTitle));
+    }
+
+    clickOnToolbarButton(title) {
+        const toolbarBtnSelector = this._selectors.toolbarBtnByTitle(title);
+        exabrowser.scrollAndClick(toolbarBtnSelector);
+    }
+
+    /**
+     * Creates a selection box above the scene object based on 2D coordinates.
+     * Each coordinate must have value from [-1, 1] range.
+     * [0, 0] coordinate is the center of the scene, [-1, 1] is the top left corner, [1, -1] is the bottom right corner accordingly.
+     * @param {object} coordinates - 2D coordinates of the selection box
+     * @param {number} coordinates.x1 - x coordinate of starting point of the selection box
+     * @param {number} coordinates.y1 - y coordinate of starting point of the selection box
+     * @param {number} coordinates.x2 - x coordinate of ending point of the selection box
+     * @param {number} coordinates.y2 - y coordinate of ending point of the selection box
+     */
+    makeMultipleSelection({ x1, y1, x2, y2 }) {
+        const viewportRect = exabrowser.execute((viewportSelector) => {
+            const viewport = document.querySelector(viewportSelector);
+            const rect = viewport.getBoundingClientRect();
+
+            return rect;
+        }, this._selectors.viewport).value;
+
+        const clientX1 = ((x1 + 1) / 2) * viewportRect.width + viewportRect.x;
+        const clientX2 = ((x2 + 1) / 2) * viewportRect.width + viewportRect.x;
+        const clientY1 = -((y1 - 1) / 2) * viewportRect.height + viewportRect.y;
+        const clientY2 = -((y2 - 1) / 2) * viewportRect.height + viewportRect.y;
+        const coordinates = { x1: clientX1, y1: clientY1, x2: clientX2, y2: clientY2 };
+
+        exabrowser.execute(
+            (selector, clientCoordinates) => {
+                const viewport = document.querySelector(selector);
+
+                viewport.dispatchEvent(
+                    new PointerEvent("pointerdown", {
+                        clientX: clientCoordinates.x1,
+                        clientY: clientCoordinates.y1,
+                    }),
+                );
+                viewport.dispatchEvent(
+                    new PointerEvent("pointermove", {
+                        clientX: clientCoordinates.x2,
+                        clientY: clientCoordinates.y2,
+                    }),
+                );
+                viewport.dispatchEvent(
+                    new PointerEvent("pointerup", {
+                        clientX: clientCoordinates.x2,
+                        clientY: clientCoordinates.y2,
+                    }),
+                );
+            },
+            this._selectors.viewport,
+            coordinates,
+        ).value;
     }
 
     selectSceneObjectByName(name) {
-        exabrowser.scrollAndClick(this._selectros.sceneObjectByName(name));
+        exabrowser.scrollAndClick(this._selectors.sceneObjectByName(name));
+    }
+
+    toggleSceneObjectOpener(sceneObjectName) {
+        exabrowser.scrollAndClick(this._selectors.sceneObjectOpenerByName(sceneObjectName));
     }
 
     openSidebarTabByTitle(title) {
-        exabrowser.scrollAndClick(this._selectros.sidebarTabByTitle(title));
+        exabrowser.scrollAndClick(this._selectors.sidebarTabByTitle(title));
     }
 
     openSceneObjectTabByTitle(title) {
-        exabrowser.scrollAndClick(this._selectros.sceneObjectTabByTitle(title));
+        exabrowser.scrollAndClick(this._selectors.sceneObjectTabByTitle(title));
     }
 
     setSceneObjectPosition(position) {
         position.forEach((value, index) => {
-            const selector = this._selectros.sceneObjectPositionByIndex(index + 1);
-            retry(() => {
-                exabrowser.scrollAndClick(selector);
-                exabrowser.keys(value);
-                exabrowser.keys('Enter');
-                assert(exabrowser.getValue(selector), value)
-            }, {retries: 5});
-        })
+            const selector = this._selectors.sceneObjectPositionByIndex(index + 1);
+            retry(
+                () => {
+                    exabrowser.scrollAndClick(selector);
+                    exabrowser.keys(value);
+                    exabrowser.keys("Enter");
+                    assert(exabrowser.getValue(selector), value);
+                },
+                { retries: 5 },
+            );
+        });
     }
 
+    getSceneObjectPosition() {
+        const position = [];
+
+        for (let i = 1; i <= 3; i++) {
+            const value = exabrowser.getValue(this._selectors.sceneObjectPositionByIndex(i));
+            position.push(parseFloat(value));
+        }
+
+        return position;
+    }
 }