fix: improve snapping demo behavior

.husky/commit-msg

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 yarn commitlint --edit $1

.husky/post-checkout

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 yarn install --frozen-lockfile

.husky/post-merge

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 yarn install --frozen-lockfile

.husky/post-rebase

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 yarn install --frozen-lockfile

.husky/pre-commit

@@ -1,6 +1,3 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 if git grep -n -E \"5cc87b12d7c5370001c1d656\(5\)\";
 then
      echo \"Remove private geOps API keys !!!!\";

.lintstagedrc.json

@@ -1,5 +1,6 @@
 {
   "(src|__mocks__)/**/*.js": ["eslint --fix", "prettier --write"],
+  "cypress/e2e/**/*.js": ["eslint --fix", "prettier --write"],
   "package.json": ["yarn fixpack"],
   "src/**/*.{css,scss}": ["stylelint --fix"]
 }

.prettierrc.json

@@ -1,4 +1 @@
-{
-  "trailingComma": "all",
-  "singleQuote": true
-}
+{}

cypress/e2e/control/cad.spec.js

@@ -8,56 +8,38 @@ const coordToFixed = (coordArray, decimals) => {
   return arr;
 };
 
-describe('CAD control', () => {
+describe("CAD control", () => {
   beforeEach(() => {
-    cy.visit('/');
+    cy.visit("/");
 
     // Draw point (click on map canvas container at x: 500 and y: 500)
     cy.get('[title="Draw Point"]').click();
-    cy.get('.ol-overlaycontainer').click(500, 500, FORCE);
+    cy.get(".ol-viewport").click(500, 500, FORCE);
   });
 
-  it.only('should not snap new points when CAD deactivated', () => {
-    cy.window().then((win) => {
-      // Draw new point (click on map canvas container at x: 507 and y: 500)
-      cy.get('.ol-overlaycontainer')
-        .click(507, 500, FORCE)
-        .then(() => {
-          const newPoint = win.editLayer.getSource().getFeatures()[1];
-          // New point should not have additional snapping distance in coordinate
-          expect(
-            JSON.stringify(newPoint.getGeometry().getCoordinates()),
-          ).to.equal(
-            JSON.stringify(win.map.getCoordinateFromPixel([507, 500])),
-          );
-        });
-    });
-  });
+  it("should snap new points to CAD point with CAD active", () => {
+    let win;
+    // Draw new point (click on map canvas container at x: 507 and y: 500)
+    cy.get(".ol-viewport").trigger("mousemove", 550, 500, FORCE);
+    cy.get(".ol-viewport").click(535, 500, FORCE);
+
+    cy.window()
+      .then((win2) => {
+        win = win2;
+      })
+      .then(() => {
+        const snapDistance = win.cad.properties.snapPointDist;
+        const newPoint = win.editLayer.getSource().getFeatures()[1];
 
-  it('should snap new points to CAD point with CAD active', () => {
-    cy.window().then((win) => {
-      // Activate CAD control (click on toolbar)
-      cy.get('.ole-control-cad').click();
-      // Draw new point (click on map canvas container at x: 507 and y: 500)
-      cy.get('.ol-overlaycontainer')
-        .click(507, 500, FORCE)
-        .then(() => {
-          const snapDistance = win.cad.properties.snapPointDist;
-          const newPoint = win.editLayer.getSource().getFeatures()[1];
-          // New point should have added snapping distance (use toFixed to ignore micro differences)
-          expect(
-            JSON.stringify(
-              coordToFixed(newPoint.getGeometry().getCoordinates(), 5),
-            ),
-          ).to.equal(
-            JSON.stringify(
-              coordToFixed(
-                win.map.getCoordinateFromPixel([500 + snapDistance, 500]),
-                5,
-              ),
-            ),
-          );
-        });
-    });
+        // New point should have added snapping distance (use toFixed to ignore micro differences)
+        expect(
+          coordToFixed(newPoint.getGeometry().getCoordinates(), 5).toString(),
+        ).to.equal(
+          coordToFixed(
+            win.map.getCoordinateFromPixel([500 + snapDistance, 500]),
+            5,
+          ).toString(),
+        );
+      });
   });
 });

cypress/e2e/control/difference.spec.js

@@ -1,48 +1,39 @@
 const FORCE = { force: true };
 
-describe('Difference control', () => {
+describe("Difference control", () => {
   beforeEach(() => {
-    cy.visit('/');
+    cy.visit("/");
 
     // Draw polygon (click on map container, double click to finish drawing)
     cy.get('[title="Draw Polygon"]').click();
-    cy.get('.ol-overlaycontainer').click(500, 200, FORCE);
-    cy.get('.ol-overlaycontainer').click(600, 400, FORCE);
-    cy.get('.ol-overlaycontainer').dblclick(400, 400, FORCE);
+    cy.get(".ol-overlaycontainer").click(500, 200, FORCE);
+    cy.get(".ol-overlaycontainer").click(600, 400, FORCE);
+    cy.get(".ol-overlaycontainer").dblclick(400, 400, FORCE);
 
     // Draw overlapping polygon (click on map container, double click to finish drawing)
-    cy.get('.ol-overlaycontainer').click(600, 200, FORCE);
-    cy.get('.ol-overlaycontainer').click(550, 350, FORCE);
-    cy.get('.ol-overlaycontainer').dblclick(400, 300, FORCE);
+    cy.get(".ol-overlaycontainer").click(600, 200, FORCE);
+    cy.get(".ol-overlaycontainer").click(550, 350, FORCE);
+    cy.get(".ol-overlaycontainer").dblclick(400, 300, FORCE);
   });
 
-  it('should subtract overlapping polygons and result in the correct multipolygon', () => {
+  it("should subtract overlapping polygons and result in the correct multipolygon", () => {
     cy.window().then((win) => {
       // Activate union tool (click on toolbar)
-      cy.get('.ole-control-difference')
-        .click()
-        .then(() => {
-          // Click on map canvas to select polygon for subtraction
-          cy.get('.ol-overlaycontainer').click(500, 210, FORCE);
-        })
-        .then(() => {
-          cy.wait(1000); // Wait to avoid zoom on map due to load races
-          // Click on map canvas to select polygon to subtract
-          cy.get('.ol-overlaycontainer').click(580, 220, FORCE);
-          cy.wait(1000).then(() => {
-            const united = win.editLayer.getSource().getFeatures()[0];
-            // Should result in a multipolygon (thus have two coordinate arrays)
-            expect(united.getGeometry().getCoordinates().length).to.equal(2);
-            // First polygon should result in a triangle (3 nodes, 4 coordinates)
-            expect(united.getGeometry().getCoordinates()[0][0].length).to.equal(
-              4,
-            );
-            // Second polygon should have 5 nodes (6 coordinates)
-            expect(united.getGeometry().getCoordinates()[1][0].length).to.equal(
-              6,
-            );
-          });
-        });
+      cy.get(".ole-control-difference").click();
+      // Click on map canvas to select polygon for subtraction
+      cy.get(".ol-overlaycontainer").click(500, 210, FORCE);
+      cy.wait(1000); // Wait to avoid zoom on map due to load races
+      // Click on map canvas to select polygon to subtract
+      cy.get(".ol-overlaycontainer").click(580, 220, FORCE);
+      cy.wait(1000).then(() => {
+        const united = win.editLayer.getSource().getFeatures()[0];
+        // Should result in a multipolygon (thus have two coordinate arrays)
+        expect(united.getGeometry().getCoordinates().length).to.equal(2);
+        // First polygon should result in a triangle (3 nodes, 4 coordinates)
+        expect(united.getGeometry().getCoordinates()[0][0].length).to.equal(4);
+        // Second polygon should have 5 nodes (6 coordinates)
+        expect(united.getGeometry().getCoordinates()[1][0].length).to.equal(6);
+      });
     });
   });
 });

cypress/e2e/control/draw.spec.js

@@ -1,29 +1,29 @@
-describe('Draw control', () => {
+describe("Draw control", () => {
   beforeEach(() => {
-    cy.visit('/');
+    cy.visit("/");
   });
 
-  it('should show draw control for points', () => {
-    cy.get('.ole-control-draw')
+  it("should show draw control for points", () => {
+    cy.get(".ole-control-draw")
       .first()
-      .should('have.attr', 'title', 'Draw Point');
+      .should("have.attr", "title", "Draw Point");
 
-    cy.get('.ole-control-draw').first().click();
-    cy.get('.ol-viewport').click('center');
-    cy.window().then((win) =>
-      expect(win.editLayer.getSource().getFeatures().length).to.eq(1),
-    );
+    cy.get(".ole-control-draw").first().click();
+    cy.get(".ol-viewport").click("center");
+    cy.window().then((win) => {
+      return expect(win.editLayer.getSource().getFeatures().length).to.eq(1);
+    });
   });
 
-  it('should show draw control for lines', () => {
-    cy.get('.ole-control-draw')
+  it("should show draw control for lines", () => {
+    cy.get(".ole-control-draw")
       .eq(1)
-      .should('have.attr', 'title', 'Draw LineString');
+      .should("have.attr", "title", "Draw LineString");
   });
 
-  it('should show draw control for polygons', () => {
-    cy.get('.ole-control-draw')
+  it("should show draw control for polygons", () => {
+    cy.get(".ole-control-draw")
       .last()
-      .should('have.attr', 'title', 'Draw Polygon');
+      .should("have.attr", "title", "Draw Polygon");
   });
 });

cypress/e2e/control/intersection.spec.js

@@ -1,40 +1,35 @@
 const FORCE = { force: true };
 
-describe('Intersect control', () => {
+describe("Intersect control", () => {
   beforeEach(() => {
-    cy.visit('/');
+    cy.visit("/");
 
     // Draw polygon (click on map container, double click to finish drawing)
     cy.get('[title="Draw Polygon"]').click();
-    cy.get('.ol-overlaycontainer').click(500, 200, FORCE);
-    cy.get('.ol-overlaycontainer').click(600, 400, FORCE);
-    cy.get('.ol-overlaycontainer').dblclick(400, 400, FORCE);
+    cy.get(".ol-overlaycontainer").click(500, 200, FORCE);
+    cy.get(".ol-overlaycontainer").click(600, 400, FORCE);
+    cy.get(".ol-overlaycontainer").dblclick(400, 400, FORCE);
 
     // Draw overlapping polygon (click on map container, double click to finish drawing)
-    cy.get('.ol-overlaycontainer').click(600, 200, FORCE);
-    cy.get('.ol-overlaycontainer').click(550, 350, FORCE);
-    cy.get('.ol-overlaycontainer').dblclick(400, 300, FORCE);
+    cy.get(".ol-overlaycontainer").click(600, 200, FORCE);
+    cy.get(".ol-overlaycontainer").click(550, 350, FORCE);
+    cy.get(".ol-overlaycontainer").dblclick(400, 300, FORCE);
   });
 
-  it('should intersect two overlapping polygons resulting in one with correct nodes', () => {
+  it("should intersect two overlapping polygons resulting in one with correct nodes", () => {
     cy.window().then((win) => {
       // Activate union tool (click on toolbar)
-      cy.get('.ole-control-intersection')
-        .click()
-        .then(() => {
-          // Click on map canvas to select polygon for intersection
-          cy.get('.ol-overlaycontainer').click(500, 210, FORCE);
-        })
-        .then(() => {
-          cy.wait(1000); // Wait to avoid zoom on map due to load races
-          // Click on map canvas to select overlapping polygon
-          cy.get('.ol-overlaycontainer').click(580, 220, FORCE);
-          cy.wait(1000).then(() => {
-            // New (united) polygon should have 5 nodes (6 coordinates)
-            const united = win.editLayer.getSource().getFeatures()[0];
-            expect(united.getGeometry().getCoordinates()[0].length).to.equal(6);
-          });
-        });
+      cy.get(".ole-control-intersection").click();
+      // Click on map canvas to select polygon for intersection
+      cy.get(".ol-overlaycontainer").click(500, 210, FORCE);
+      cy.wait(1000); // Wait to avoid zoom on map due to load races
+      // Click on map canvas to select overlapping polygon
+      cy.get(".ol-overlaycontainer").click(580, 220, FORCE);
+      cy.wait(1000).then(() => {
+        // New (united) polygon should have 5 nodes (6 coordinates)
+        const united = win.editLayer.getSource().getFeatures()[0];
+        expect(united.getGeometry().getCoordinates()[0].length).to.equal(6);
+      });
     });
   });
 });