@reltio/components 1.4.2257 → 1.4.2258

package/ReltioMap/ReltioMap.spec.js

@@ -59,7 +59,8 @@ import { act, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { findLast, last } from 'ramda';
 import { OverlayView, initialize, mockInstances, AdvancedMarkerElement, Map, Polygon } from '@googlemaps/jest-mocks';
-import { MAP_DRAWING_MODES } from '../constants';
+import { POLYGON_DRAWING_MODE } from '../constants';
+import { MAP_DRAWING_CROSSHAIR_CURSOR } from './components/PolygonDrawing/usePolygonDrawing';
 import * as helpers from './helpers';
 import { ReltioMap } from './ReltioMap';
 jest.mock('@vis.gl/react-google-maps', function () { return (__assign(__assign({}, jest.requireActual('@vis.gl/react-google-maps')), { MapControl: function (_a) {
@@ -81,8 +82,24 @@ describe('ReltioMap tests', function () {
         var user = userEvent.setup();
         return __assign(__assign({}, render(React.createElement(ReltioMap, __assign({}, props)))), { user: user });
     };
-    var drawingManagerInstance;
-    var drawingManagerConstructorSpy = jest.fn();
+    /**
+     * Map click payload: must expose lat()/lng() for serialization and equals() for polygonRingHelpers
+     */
+    var mapMouseEventWith = function (lat, lng) { return ({
+        latLng: {
+            lat: function () { return lat; },
+            lng: function () { return lng; },
+            equals: function (other) {
+                var oLat = typeof other.lat === 'function'
+                    ? other.lat()
+                    : other.lat;
+                var oLng = typeof other.lng === 'function'
+                    ? other.lng()
+                    : other.lng;
+                return oLat === lat && oLng === lng;
+            }
+        }
+    }); };
     beforeAll(function () {
         initialize();
         var OriginalMap = google.maps.Map;
@@ -91,32 +108,11 @@ describe('ReltioMap tests', function () {
             for (var _i = 0; _i < arguments.length; _i++) {
                 args[_i] = arguments[_i];
             }
-            return new (OriginalMap.bind.apply(OriginalMap, __spreadArray([void 0], args, false)))();
+            var mapInstance = new (OriginalMap.bind.apply(OriginalMap, __spreadArray([void 0], args, false)))();
+            mapInstance.setOptions = jest.fn();
+            mapInstance.get = jest.fn(function () { return undefined; });
+            return mapInstance;
         });
-        global.google.maps.drawing.DrawingManager = /** @class */ (function () {
-            function DrawingManager() {
-                var args = [];
-                for (var _i = 0; _i < arguments.length; _i++) {
-                    args[_i] = arguments[_i];
-                }
-                this.addListener = jest.fn();
-                this.getDrawingMode = jest.fn();
-                this.getMap = jest.fn();
-                this.setDrawingMode = jest.fn();
-                this.setMap = jest.fn();
-                this.setOptions = jest.fn();
-                drawingManagerConstructorSpy.apply(void 0, args);
-                drawingManagerInstance = this;
-            }
-            return DrawingManager;
-        }());
-        global.google.maps.drawing.OverlayType = {
-            CIRCLE: 'circle',
-            MARKER: 'marker',
-            POLYGON: 'polygon',
-            POLYLINE: 'polyline',
-            RECTANGLE: 'rectangle'
-        };
         var overlayView = new OverlayView();
         for (var property in overlayView) {
             if (!global.google.maps.OverlayView.prototype.hasOwnProperty(property)) {
@@ -124,9 +120,6 @@ describe('ReltioMap tests', function () {
             }
         }
     });
-    beforeEach(function () {
-        drawingManagerInstance = null;
-    });
     afterEach(function () {
         jest.clearAllMocks();
         mockInstances.clearAll();
@@ -142,13 +135,14 @@ describe('ReltioMap tests', function () {
         }, target.addListener.mock.calls)) === null || _b === void 0 ? void 0 : _b[1]);
     };
     var getLastInstance = function (instance) { return last(mockInstances.get(instance)); };
+    var getFirstInstance = function (instance) { var _a; return (_a = mockInstances.get(instance)) === null || _a === void 0 ? void 0 : _a[0]; };
     describe('general behaviour', function () {
         it('should render map controls', function () { return __awaiter(void 0, void 0, void 0, function () {
             var _a;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
-                        setUp(__assign(__assign({}, defaultProps), { drawingModes: [MAP_DRAWING_MODES.POLYGON] }));
+                        setUp(__assign(__assign({}, defaultProps), { enablePolygonDrawing: true }));
                         _a = expect;
                         return [4 /*yield*/, screen.findByLabelText('Draw area')];
                     case 1:
@@ -164,7 +158,7 @@ describe('ReltioMap tests', function () {
                 switch (_a.label) {
                     case 0:
                         mapOptions = { mapTypeControl: true };
-                        setUp(__assign(__assign({}, defaultProps), { drawingModes: [MAP_DRAWING_MODES.POLYGON], mapOptions: mapOptions }));
+                        setUp(__assign(__assign({}, defaultProps), { enablePolygonDrawing: true, mapOptions: mapOptions }));
                         return [4 /*yield*/, waitFor(function () {
                                 expect(google.maps.Map).toHaveBeenCalledWith(expect.any(HTMLElement), expect.objectContaining({
                                     fullscreenControl: false,
@@ -182,7 +176,7 @@ describe('ReltioMap tests', function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        setUp(__assign(__assign({}, defaultProps), { drawingModes: [MAP_DRAWING_MODES.POLYGON], isSearchEnabled: false }));
+                        setUp(__assign(__assign({}, defaultProps), { enablePolygonDrawing: true, isSearchEnabled: false }));
                         return [4 /*yield*/, waitFor(function () {
                                 expect(screen.queryByLabelText('Draw area')).not.toBeInTheDocument();
                             })];
@@ -208,7 +202,7 @@ describe('ReltioMap tests', function () {
                             }
                         ];
                         onMarkerClick = jest.fn();
-                        setUp(__assign(__assign({}, defaultProps), { drawingModes: [MAP_DRAWING_MODES.POLYGON], onMarkerClicked: onMarkerClick, markers: markers }));
+                        setUp(__assign(__assign({}, defaultProps), { enablePolygonDrawing: true, onMarkerClicked: onMarkerClick, markers: markers }));
                         return [4 /*yield*/, waitFor(function () {
                                 markerMock = getLastInstance(AdvancedMarkerElement);
                                 expect(markerMock).toBeDefined();
@@ -252,7 +246,7 @@ describe('ReltioMap tests', function () {
         });
         it('should fit map bounds correctly if markers loaded later than map and activeOverlay is not null', function () {
             var activeOverlay = {
-                type: MAP_DRAWING_MODES.POLYGON,
+                type: POLYGON_DRAWING_MODE,
                 path: [
                     { lat: 1, lng: 1 },
                     { lat: 2, lng: 2 }
@@ -313,7 +307,7 @@ describe('ReltioMap tests', function () {
             var fitMapBoundsForOverlay = jest.spyOn(helpers, 'fitMapBoundsForOverlay');
             var rerender = setUp(__assign(__assign({}, defaultProps), { activeOverlay: null })).rerender;
             var newProps = __assign(__assign({}, defaultProps), { activeOverlay: {
-                    type: MAP_DRAWING_MODES.POLYGON,
+                    type: POLYGON_DRAWING_MODE,
                     path: [
                         { lat: 1, lng: 1 },
                         { lat: 2, lng: 2 }
@@ -330,7 +324,7 @@ describe('ReltioMap tests', function () {
             var fitMapBoundsForOverlay = jest.spyOn(helpers, 'fitMapBoundsForOverlay');
             var rerender = setUp(__assign(__assign({}, defaultProps), { activeOverlay: null })).rerender;
             var newProps = __assign(__assign({}, defaultProps), { activeOverlay: {
-                    type: MAP_DRAWING_MODES.POLYGON,
+                    type: POLYGON_DRAWING_MODE,
                     path: [
                         { lat: 1, lng: 1 },
                         { lat: 2, lng: 2 }
@@ -381,16 +375,16 @@ describe('ReltioMap tests', function () {
                 switch (_b.label) {
                     case 0:
                         activeOverlay = {
-                            type: MAP_DRAWING_MODES.POLYGON,
+                            type: POLYGON_DRAWING_MODE,
                             path: [
                                 { lat: 1, lng: 1 },
                                 { lat: 2, lng: 2 }
                             ]
                         };
-                        _a = setUp(__assign(__assign({}, defaultProps), { drawingModes: [MAP_DRAWING_MODES.POLYGON], activeOverlay: activeOverlay })), user = _a.user, rerender = _a.rerender;
+                        _a = setUp(__assign(__assign({}, defaultProps), { enablePolygonDrawing: true, activeOverlay: activeOverlay })), user = _a.user, rerender = _a.rerender;
                         polygon = getLastInstance(Polygon);
                         expect(polygon.setOptions).toHaveBeenCalledWith(expect.objectContaining({ paths: activeOverlay.path }));
-                        newProps = __assign(__assign({}, defaultProps), { drawingModes: [MAP_DRAWING_MODES.POLYGON], activeOverlay: null });
+                        newProps = __assign(__assign({}, defaultProps), { enablePolygonDrawing: true, activeOverlay: null });
                         rerender(React.createElement(ReltioMap, __assign({}, newProps)));
                         return [4 /*yield*/, user.click(screen.getByLabelText('Draw area'))];
                     case 1:
@@ -400,16 +394,16 @@ describe('ReltioMap tests', function () {
                 }
             });
         }); });
-        it('should not render Polygon if "activeOverlay" prop is circle', function () { return __awaiter(void 0, void 0, void 0, function () {
+        it('should not render Polygon if "activeOverlay" is not a polygon', function () { return __awaiter(void 0, void 0, void 0, function () {
             var activeOverlay;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         activeOverlay = {
-                            type: MAP_DRAWING_MODES.CIRCLE,
+                            type: 'bounds-rectangle',
                             path: [{ lat: 1, lng: 1 }]
                         };
-                        setUp(__assign(__assign({}, defaultProps), { drawingModes: [MAP_DRAWING_MODES.POLYGON], activeOverlay: activeOverlay }));
+                        setUp(__assign(__assign({}, defaultProps), { enablePolygonDrawing: true, activeOverlay: activeOverlay }));
                         return [4 /*yield*/, waitFor(function () {
                                 expect(mockInstances.get(Polygon)).toHaveLength(0);
                             })];
@@ -425,19 +419,19 @@ describe('ReltioMap tests', function () {
                 switch (_a.label) {
                     case 0:
                         activeOverlay = {
-                            type: MAP_DRAWING_MODES.POLYGON,
+                            type: POLYGON_DRAWING_MODE,
                             path: [
                                 { lat: 1, lng: 1 },
                                 { lat: 2, lng: 2 }
                             ]
                         };
                         onOverlayUpdated = jest.fn();
-                        setUp(__assign(__assign({}, defaultProps), { drawingModes: [MAP_DRAWING_MODES.POLYGON], activeOverlay: activeOverlay, onOverlayUpdated: onOverlayUpdated }));
+                        setUp(__assign(__assign({}, defaultProps), { enablePolygonDrawing: true, activeOverlay: activeOverlay, onOverlayUpdated: onOverlayUpdated }));
                         polygon = getLastInstance(Polygon);
                         getEventHandler(polygon, 'mouseup')();
                         return [4 /*yield*/, waitFor(function () {
                                 expect(onOverlayUpdated).toHaveBeenCalledWith({
-                                    type: MAP_DRAWING_MODES.POLYGON,
+                                    type: POLYGON_DRAWING_MODE,
                                     data: []
                                 });
                             })];
@@ -454,19 +448,19 @@ describe('ReltioMap tests', function () {
                 switch (_a.label) {
                     case 0:
                         activeOverlay = {
-                            type: MAP_DRAWING_MODES.POLYGON,
+                            type: POLYGON_DRAWING_MODE,
                             path: [
                                 { lat: 1, lng: 1 },
                                 { lat: 2, lng: 2 }
                             ]
                         };
                         onOverlayUpdated = jest.fn();
-                        setUp(__assign(__assign({}, defaultProps), { drawingModes: [MAP_DRAWING_MODES.POLYGON], activeOverlay: activeOverlay, onOverlayUpdated: onOverlayUpdated }));
+                        setUp(__assign(__assign({}, defaultProps), { enablePolygonDrawing: true, activeOverlay: activeOverlay, onOverlayUpdated: onOverlayUpdated }));
                         polygon = getLastInstance(Polygon);
                         getEventHandler(polygon, 'dragend')();
                         return [4 /*yield*/, waitFor(function () {
                                 expect(onOverlayUpdated).toHaveBeenCalledWith({
-                                    type: MAP_DRAWING_MODES.POLYGON,
+                                    type: POLYGON_DRAWING_MODE,
                                     data: []
                                 });
                             })];
@@ -479,46 +473,54 @@ describe('ReltioMap tests', function () {
         }); });
     });
     describe('drawing behavior', function () {
-        it("shouldn't be in drawing mode by default", function () { return __awaiter(void 0, void 0, void 0, function () {
+        it("shouldn't enable double-click zoom suppression before entering draw mode", function () { return __awaiter(void 0, void 0, void 0, function () {
+            var mapMock;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        setUp(__assign(__assign({}, defaultProps), { drawingModes: [MAP_DRAWING_MODES.CIRCLE] }));
-                        return [4 /*yield*/, waitFor(function () {
-                                expect(drawingManagerInstance).not.toBe(null);
-                            })];
+                        setUp(__assign(__assign({}, defaultProps), { enablePolygonDrawing: true }));
+                        return [4 /*yield*/, waitFor(function () { return getLastInstance(Map); })];
                     case 1:
-                        _a.sent();
-                        expect(drawingManagerInstance.setDrawingMode).not.toHaveBeenCalledWith(MAP_DRAWING_MODES.CIRCLE);
+                        mapMock = _a.sent();
+                        expect(mapMock.setOptions).not.toHaveBeenCalledWith({ disableDoubleClickZoom: true });
                         return [2 /*return*/];
                 }
             });
         }); });
-        it('should change drawing mode on map control action', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var user;
+        it('should toggle double-click zoom suppression when entering and leaving polygon drawing mode', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user, mapMock;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        user = setUp(__assign(__assign({}, defaultProps), { drawingModes: [MAP_DRAWING_MODES.CIRCLE] })).user;
-                        return [4 /*yield*/, user.click(screen.getByLabelText('Draw area'))];
+                        user = setUp(__assign(__assign({}, defaultProps), { enablePolygonDrawing: true })).user;
+                        return [4 /*yield*/, waitFor(function () { return getLastInstance(Map); })];
                     case 1:
+                        mapMock = _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByLabelText('Draw area'))];
+                    case 2:
                         _a.sent();
-                        expect(drawingManagerConstructorSpy).toHaveBeenCalledWith(expect.objectContaining({ drawingMode: MAP_DRAWING_MODES.CIRCLE }));
+                        expect(mapMock.setOptions).toHaveBeenCalledWith(expect.objectContaining({
+                            draggableCursor: MAP_DRAWING_CROSSHAIR_CURSOR
+                        }));
+                        expect(mapMock.setOptions).toHaveBeenCalledWith(expect.objectContaining({
+                            disableDoubleClickZoom: true,
+                            clickableIcons: false
+                        }));
                         return [4 /*yield*/, user.click(screen.getByLabelText('Clear area'))];
-                    case 2:
+                    case 3:
                         _a.sent();
-                        expect(drawingManagerConstructorSpy).toHaveBeenCalledWith(expect.objectContaining({ drawingMode: null }));
+                        expect(mapMock.setOptions).toHaveBeenCalledWith(expect.objectContaining({ disableDoubleClickZoom: false }));
                         return [2 /*return*/];
                 }
             });
         }); });
-        it("shouldn't render DrawingManager without drawingModes prop", function () { return __awaiter(void 0, void 0, void 0, function () {
+        it("shouldn't attach polygon drawing listeners when polygon drawing is disabled", function () { return __awaiter(void 0, void 0, void 0, function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         setUp(__assign({}, defaultProps));
                         return [4 /*yield*/, waitFor(function () {
-                                expect(drawingManagerInstance).toBe(null);
+                                expect(screen.queryByLabelText('Draw area')).not.toBeInTheDocument();
                             })];
                     case 1:
                         _a.sent();
@@ -526,7 +528,7 @@ describe('ReltioMap tests', function () {
                 }
             });
         }); });
-        it("shouldn't render TopRightMapControls without drawingModes prop", function () { return __awaiter(void 0, void 0, void 0, function () {
+        it("shouldn't render TopRightMapControls when polygon drawing is disabled", function () { return __awaiter(void 0, void 0, void 0, function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -541,38 +543,213 @@ describe('ReltioMap tests', function () {
                 }
             });
         }); });
-        it('should call props.onOverlayUpdated after polygon completing', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var onOverlayUpdated, user, overlay;
+        it('should call props.onOverlayUpdated after polygon completing with correct vertex coordinates', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onOverlayUpdated, OriginalPolygon, polygonPathSpy, user, mapMock, mapDiv, clickHandler;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         onOverlayUpdated = jest.fn();
-                        user = setUp(__assign(__assign({}, defaultProps), { onOverlayUpdated: onOverlayUpdated, drawingModes: [MAP_DRAWING_MODES.POLYGON] })).user;
+                        OriginalPolygon = google.maps.Polygon;
+                        polygonPathSpy = jest.spyOn(google.maps, 'Polygon').mockImplementation(function (opts) {
+                            var instance = new OriginalPolygon(opts);
+                            var raw = opts === null || opts === void 0 ? void 0 : opts.paths;
+                            var ring = !raw
+                                ? []
+                                : 'getArray' in raw
+                                    ? raw.getArray()
+                                    : raw;
+                            var mvc = new google.maps.MVCArray();
+                            mvc.getArray = jest.fn(function () { return ring; });
+                            instance.getPath = jest.fn(function () { return mvc; });
+                            return instance;
+                        });
+                        user = setUp(__assign(__assign({}, defaultProps), { onOverlayUpdated: onOverlayUpdated, enablePolygonDrawing: true })).user;
+                        return [4 /*yield*/, waitFor(function () {
+                                var m = getLastInstance(Map);
+                                if (!m) {
+                                    throw new Error('Map not ready');
+                                }
+                                return m;
+                            })];
+                    case 1:
+                        mapMock = _a.sent();
+                        mapDiv = document.createElement('div');
+                        mapMock.getDiv = jest.fn(function () { return mapDiv; });
                         return [4 /*yield*/, user.click(screen.getByLabelText('Draw area'))];
+                    case 2:
+                        _a.sent();
+                        clickHandler = getEventHandler(mapMock, 'click');
+                        act(function () {
+                            clickHandler(mapMouseEventWith(1, 2));
+                            clickHandler(mapMouseEventWith(3, 4));
+                            clickHandler(mapMouseEventWith(5, 6));
+                        });
+                        act(function () {
+                            mapDiv.dispatchEvent(new MouseEvent('dblclick', { bubbles: true, cancelable: true, composed: true }));
+                        });
+                        return [4 /*yield*/, waitFor(function () {
+                                expect(onOverlayUpdated).toHaveBeenCalled();
+                            })];
+                    case 3:
+                        _a.sent();
+                        expect(onOverlayUpdated.mock.calls[0][0]).toEqual(expect.objectContaining({
+                            type: POLYGON_DRAWING_MODE,
+                            data: [
+                                [1, 2],
+                                [3, 4],
+                                [5, 6]
+                            ]
+                        }));
+                        polygonPathSpy.mockRestore();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('completes the ring when the first vertex marker is clicked after three map clicks', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onOverlayUpdated, OriginalPolygon, polygonPathSpy, user, mapMock, mapDiv, clickHandler, firstVertexMarker;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onOverlayUpdated = jest.fn();
+                        OriginalPolygon = google.maps.Polygon;
+                        polygonPathSpy = jest.spyOn(google.maps, 'Polygon').mockImplementation(function (opts) {
+                            var instance = new OriginalPolygon(opts);
+                            var raw = opts === null || opts === void 0 ? void 0 : opts.paths;
+                            var ring = !raw
+                                ? []
+                                : 'getArray' in raw
+                                    ? raw.getArray()
+                                    : raw;
+                            var mvc = new google.maps.MVCArray();
+                            mvc.getArray = jest.fn(function () { return ring; });
+                            instance.getPath = jest.fn(function () { return mvc; });
+                            return instance;
+                        });
+                        user = setUp(__assign(__assign({}, defaultProps), { onOverlayUpdated: onOverlayUpdated, enablePolygonDrawing: true })).user;
+                        return [4 /*yield*/, waitFor(function () {
+                                var m = getLastInstance(Map);
+                                if (!m) {
+                                    throw new Error('Map not ready');
+                                }
+                                return m;
+                            })];
                     case 1:
+                        mapMock = _a.sent();
+                        mapDiv = document.createElement('div');
+                        mapMock.getDiv = jest.fn(function () { return mapDiv; });
+                        return [4 /*yield*/, user.click(screen.getByLabelText('Draw area'))];
+                    case 2:
                         _a.sent();
-                        expect(drawingManagerConstructorSpy).toHaveBeenCalledWith(expect.objectContaining({ drawingMode: MAP_DRAWING_MODES.POLYGON }));
-                        overlay = {
-                            setMap: jest.fn(),
-                            getPath: function () { return ({
-                                getArray: function () { return [
-                                    { lat: function () { return 1; }, lng: function () { return 2; } },
-                                    { lat: function () { return 3; }, lng: function () { return 4; } }
-                                ]; }
-                            }); }
-                        };
+                        clickHandler = getEventHandler(mapMock, 'click');
                         act(function () {
-                            getEventHandler(drawingManagerInstance, 'polygoncomplete')(overlay);
+                            clickHandler(mapMouseEventWith(1, 2));
+                            clickHandler(mapMouseEventWith(3, 4));
+                            clickHandler(mapMouseEventWith(5, 6));
                         });
-                        expect(onOverlayUpdated).toHaveBeenCalledWith({
-                            type: MAP_DRAWING_MODES.POLYGON,
+                        firstVertexMarker = getFirstInstance(AdvancedMarkerElement);
+                        expect(firstVertexMarker).toBeDefined();
+                        act(function () {
+                            getEventHandler(firstVertexMarker, 'click')(__assign(__assign({}, mapMouseEventWith(0, 0)), { stop: jest.fn() }));
+                        });
+                        return [4 /*yield*/, waitFor(function () {
+                                expect(onOverlayUpdated).toHaveBeenCalled();
+                            })];
+                    case 3:
+                        _a.sent();
+                        expect(onOverlayUpdated.mock.calls[0][0]).toEqual(expect.objectContaining({
+                            type: POLYGON_DRAWING_MODE,
                             data: [
                                 [1, 2],
-                                [3, 4]
+                                [3, 4],
+                                [5, 6]
                             ]
+                        }));
+                        polygonPathSpy.mockRestore();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('clears the in-progress draw on map mouseleave so double-click does not complete a polygon', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onOverlayUpdated, user, mapMock, mapDiv, clickHandler;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onOverlayUpdated = jest.fn();
+                        user = setUp(__assign(__assign({}, defaultProps), { onOverlayUpdated: onOverlayUpdated, enablePolygonDrawing: true })).user;
+                        return [4 /*yield*/, waitFor(function () { return getLastInstance(Map); })];
+                    case 1:
+                        mapMock = _a.sent();
+                        mapDiv = document.createElement('div');
+                        mapMock.getDiv = jest.fn(function () { return mapDiv; });
+                        return [4 /*yield*/, user.click(screen.getByLabelText('Draw area'))];
+                    case 2:
+                        _a.sent();
+                        clickHandler = getEventHandler(mapMock, 'click');
+                        act(function () {
+                            clickHandler(mapMouseEventWith(1, 2));
+                            clickHandler(mapMouseEventWith(3, 4));
+                            clickHandler(mapMouseEventWith(5, 6));
                         });
-                        expect(overlay.setMap).toHaveBeenCalledWith(null);
-                        expect(drawingManagerConstructorSpy).toHaveBeenCalledWith(expect.objectContaining({ drawingMode: null }));
+                        act(function () {
+                            mapDiv.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true }));
+                        });
+                        act(function () {
+                            mapDiv.dispatchEvent(new MouseEvent('dblclick', { bubbles: true, cancelable: true, composed: true }));
+                        });
+                        expect(onOverlayUpdated).not.toHaveBeenCalled();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('ignores a second double-click after completion until draw mode is toggled', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onOverlayUpdated, OriginalPolygon, polygonPathSpy, user, mapMock, mapDiv, clickHandler;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onOverlayUpdated = jest.fn();
+                        OriginalPolygon = google.maps.Polygon;
+                        polygonPathSpy = jest.spyOn(google.maps, 'Polygon').mockImplementation(function (opts) {
+                            var instance = new OriginalPolygon(opts);
+                            var raw = opts === null || opts === void 0 ? void 0 : opts.paths;
+                            var ring = !raw
+                                ? []
+                                : 'getArray' in raw
+                                    ? raw.getArray()
+                                    : raw;
+                            var mvc = new google.maps.MVCArray();
+                            mvc.getArray = jest.fn(function () { return ring; });
+                            instance.getPath = jest.fn(function () { return mvc; });
+                            return instance;
+                        });
+                        user = setUp(__assign(__assign({}, defaultProps), { onOverlayUpdated: onOverlayUpdated, enablePolygonDrawing: true })).user;
+                        return [4 /*yield*/, waitFor(function () { return getLastInstance(Map); })];
+                    case 1:
+                        mapMock = _a.sent();
+                        mapDiv = document.createElement('div');
+                        mapMock.getDiv = jest.fn(function () { return mapDiv; });
+                        return [4 /*yield*/, user.click(screen.getByLabelText('Draw area'))];
+                    case 2:
+                        _a.sent();
+                        clickHandler = getEventHandler(mapMock, 'click');
+                        act(function () {
+                            clickHandler(mapMouseEventWith(1, 2));
+                            clickHandler(mapMouseEventWith(3, 4));
+                            clickHandler(mapMouseEventWith(5, 6));
+                        });
+                        act(function () {
+                            mapDiv.dispatchEvent(new MouseEvent('dblclick', { bubbles: true, cancelable: true, composed: true }));
+                        });
+                        return [4 /*yield*/, waitFor(function () {
+                                expect(onOverlayUpdated).toHaveBeenCalledTimes(1);
+                            })];
+                    case 3:
+                        _a.sent();
+                        onOverlayUpdated.mockClear();
+                        act(function () {
+                            mapDiv.dispatchEvent(new MouseEvent('dblclick', { bubbles: true, cancelable: true, composed: true }));
+                        });
+                        expect(onOverlayUpdated).not.toHaveBeenCalled();
+                        polygonPathSpy.mockRestore();
                         return [2 /*return*/];
                 }
             });
@@ -584,13 +761,13 @@ describe('ReltioMap tests', function () {
                     case 0:
                         onOverlayUpdated = jest.fn();
                         activeOverlay = {
-                            type: MAP_DRAWING_MODES.POLYGON,
+                            type: POLYGON_DRAWING_MODE,
                             path: [
                                 { lat: 1, lng: 1 },
                                 { lat: 2, lng: 2 }
                             ]
                         };
-                        user = setUp(__assign(__assign({}, defaultProps), { drawingModes: [MAP_DRAWING_MODES.CIRCLE], activeOverlay: activeOverlay, onOverlayUpdated: onOverlayUpdated })).user;
+                        user = setUp(__assign(__assign({}, defaultProps), { enablePolygonDrawing: true, activeOverlay: activeOverlay, onOverlayUpdated: onOverlayUpdated })).user;
                         return [4 /*yield*/, user.click(screen.getByLabelText('Clear area'))];
                     case 1:
                         _a.sent();
@@ -602,7 +779,7 @@ describe('ReltioMap tests', function () {
     });
     describe('"Search when I move the map" behavior', function () {
         it('should call props.onMapBoundsChanged with current map bounds and reset drawingMode on change isSearchOnMapMove(true)', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var onMapBoundsChanged, mapBoundsPolygon, user;
+            var onMapBoundsChanged, mapBoundsPolygon, user, mapMock;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -611,39 +788,57 @@ describe('ReltioMap tests', function () {
                             [1, 2],
                             [3, 4]
                         ];
-                        user = setUp(__assign(__assign({}, defaultProps), { onMapBoundsChanged: onMapBoundsChanged, drawingModes: [MAP_DRAWING_MODES.POLYGON] })).user;
+                        user = setUp(__assign(__assign({}, defaultProps), { onMapBoundsChanged: onMapBoundsChanged, enablePolygonDrawing: true })).user;
                         jest.spyOn(helpers, 'getMapBoundsPolygon').mockImplementation(function () { return mapBoundsPolygon; });
-                        return [4 /*yield*/, user.click(screen.getByLabelText('Draw area'))];
+                        return [4 /*yield*/, waitFor(function () { return getLastInstance(Map); })];
                     case 1:
+                        mapMock = _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByLabelText('Draw area'))];
+                    case 2:
                         _a.sent();
-                        expect(drawingManagerConstructorSpy).toHaveBeenCalledWith(expect.objectContaining({ drawingMode: MAP_DRAWING_MODES.POLYGON }));
+                        expect(mapMock.setOptions).toHaveBeenCalledWith(expect.objectContaining({
+                            draggableCursor: MAP_DRAWING_CROSSHAIR_CURSOR
+                        }));
+                        expect(mapMock.setOptions).toHaveBeenCalledWith(expect.objectContaining({
+                            disableDoubleClickZoom: true,
+                            clickableIcons: false
+                        }));
                         return [4 /*yield*/, user.click(screen.getByText('Search as I move the map'))];
-                    case 2:
+                    case 3:
                         _a.sent();
-                        expect(drawingManagerConstructorSpy).toHaveBeenCalledWith(expect.objectContaining({ drawingMode: null }));
+                        expect(mapMock.setOptions).toHaveBeenCalledWith(expect.objectContaining({ disableDoubleClickZoom: false }));
                         expect(onMapBoundsChanged).toHaveBeenCalledWith(mapBoundsPolygon);
                         return [2 /*return*/];
                 }
             });
         }); });
         it('should call props.onMapBoundsChanged with null on change isSearchOnMapMove(false)', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var onMapBoundsChanged, user;
+            var onMapBoundsChanged, user, mapMock;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         onMapBoundsChanged = jest.fn();
-                        user = setUp(__assign(__assign({}, defaultProps), { onMapBoundsChanged: onMapBoundsChanged, drawingModes: [MAP_DRAWING_MODES.POLYGON] })).user;
-                        return [4 /*yield*/, user.click(screen.getByLabelText('Draw area'))];
+                        user = setUp(__assign(__assign({}, defaultProps), { onMapBoundsChanged: onMapBoundsChanged, enablePolygonDrawing: true })).user;
+                        return [4 /*yield*/, waitFor(function () { return getLastInstance(Map); })];
                     case 1:
-                        _a.sent();
-                        expect(drawingManagerConstructorSpy).toHaveBeenCalledWith(expect.objectContaining({ drawingMode: MAP_DRAWING_MODES.POLYGON }));
-                        return [4 /*yield*/, user.click(screen.getByText('Search as I move the map'))];
+                        mapMock = _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByLabelText('Draw area'))];
                     case 2:
                         _a.sent();
+                        expect(mapMock.setOptions).toHaveBeenCalledWith(expect.objectContaining({
+                            draggableCursor: MAP_DRAWING_CROSSHAIR_CURSOR
+                        }));
+                        expect(mapMock.setOptions).toHaveBeenCalledWith(expect.objectContaining({
+                            disableDoubleClickZoom: true,
+                            clickableIcons: false
+                        }));
                         return [4 /*yield*/, user.click(screen.getByText('Search as I move the map'))];
                     case 3:
                         _a.sent();
-                        expect(drawingManagerConstructorSpy).toHaveBeenCalledWith(expect.objectContaining({ drawingMode: null }));
+                        return [4 /*yield*/, user.click(screen.getByText('Search as I move the map'))];
+                    case 4:
+                        _a.sent();
+                        expect(mapMock.setOptions).toHaveBeenCalledWith(expect.objectContaining({ disableDoubleClickZoom: false }));
                         expect(onMapBoundsChanged).toHaveBeenCalledWith(null);
                         return [2 /*return*/];
                 }
@@ -656,7 +851,7 @@ describe('ReltioMap tests', function () {
                 [1, 2],
                 [3, 4]
             ];
-            setUp(__assign(__assign({}, defaultProps), { onMapBoundsChanged: onMapBoundsChanged, drawingModes: [MAP_DRAWING_MODES.POLYGON], isSearchOnMapMove: true }));
+            setUp(__assign(__assign({}, defaultProps), { onMapBoundsChanged: onMapBoundsChanged, enablePolygonDrawing: true, isSearchOnMapMove: true }));
             jest.spyOn(helpers, 'getMapBoundsPolygon').mockImplementation(function () { return mapBoundsPolygon; });
             expect(screen.getByLabelText('Search as I move the map').checked).toBe(true);
             expect(onMapBoundsChanged).not.toHaveBeenCalled();
@@ -673,7 +868,7 @@ describe('ReltioMap tests', function () {
                 [1, 2],
                 [3, 4]
             ];
-            setUp(__assign(__assign({}, defaultProps), { onMapBoundsChanged: onMapBoundsChanged, drawingModes: [MAP_DRAWING_MODES.POLYGON], isSearchOnMapMove: true }));
+            setUp(__assign(__assign({}, defaultProps), { onMapBoundsChanged: onMapBoundsChanged, enablePolygonDrawing: true, isSearchOnMapMove: true }));
             jest.spyOn(helpers, 'getMapBoundsPolygon').mockImplementation(function () { return mapBoundsPolygon; });
             expect(screen.getByLabelText('Search as I move the map').checked).toBe(true);
             var mapMock = getLastInstance(Map);
@@ -691,7 +886,7 @@ describe('ReltioMap tests', function () {
         it('should not call props.onMapBoundsChanged on google map idle if "Search when I move the map" mode is off', function () {
             jest.useFakeTimers();
             var onMapBoundsChanged = jest.fn();
-            setUp(__assign(__assign({}, defaultProps), { onMapBoundsChanged: onMapBoundsChanged, drawingModes: [MAP_DRAWING_MODES.POLYGON], isSearchOnMapMove: false }));
+            setUp(__assign(__assign({}, defaultProps), { onMapBoundsChanged: onMapBoundsChanged, enablePolygonDrawing: true, isSearchOnMapMove: false }));
             expect(screen.getByLabelText('Search as I move the map').checked).toBe(false);
             getEventHandler(getLastInstance(Map), 'idle')();
             jest.runOnlyPendingTimers();