@reltio/components 1.4.2256 → 1.4.2258

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (95) hide show
  1. package/AttributesView/AttributesView.test.js +8 -2
  2. package/EditModeAttributesPager/components/SpecialRenderer/SpecialRenderer.js +5 -2
  3. package/ReltioMap/ReltioMap.d.ts +5 -8
  4. package/ReltioMap/ReltioMap.js +31 -39
  5. package/ReltioMap/ReltioMap.spec.js +299 -104
  6. package/ReltioMap/components/ClusteredMarkers/ClusteredMarkers.d.ts +2 -1
  7. package/ReltioMap/components/ClusteredMarkers/ClusteredMarkers.js +11 -13
  8. package/ReltioMap/components/EntityMarker/EntityMarker.d.ts +2 -1
  9. package/ReltioMap/components/EntityMarker/EntityMarker.js +3 -3
  10. package/ReltioMap/components/PolygonDrawing/PolygonDrawing.d.ts +4 -0
  11. package/ReltioMap/components/PolygonDrawing/PolygonDrawing.js +18 -0
  12. package/ReltioMap/components/PolygonDrawing/crosshair.inline.svg.d.ts +1 -0
  13. package/ReltioMap/components/PolygonDrawing/crosshair.inline.svg.js +1 -0
  14. package/ReltioMap/components/PolygonDrawing/index.d.ts +2 -0
  15. package/ReltioMap/components/PolygonDrawing/index.js +2 -0
  16. package/ReltioMap/components/PolygonDrawing/polygonRingHelpers.d.ts +5 -0
  17. package/ReltioMap/components/PolygonDrawing/polygonRingHelpers.js +43 -0
  18. package/ReltioMap/components/PolygonDrawing/useDrawingCursors.d.ts +6 -0
  19. package/ReltioMap/components/PolygonDrawing/useDrawingCursors.js +87 -0
  20. package/ReltioMap/components/PolygonDrawing/usePolygonDrawing.d.ts +9 -0
  21. package/ReltioMap/components/PolygonDrawing/usePolygonDrawing.js +197 -0
  22. package/ReltioMap/components/PolygonDrawing/usePreviewPolylines.d.ts +7 -0
  23. package/ReltioMap/components/PolygonDrawing/usePreviewPolylines.js +38 -0
  24. package/ReltioMap/components/PolygonDrawing/useVertexHandles.d.ts +14 -0
  25. package/ReltioMap/components/PolygonDrawing/useVertexHandles.js +85 -0
  26. package/ReltioMap/components/TopRightMapControls/TopRightMapControls.d.ts +3 -3
  27. package/ReltioMap/components/TopRightMapControls/TopRightMapControls.js +4 -18
  28. package/ReltioMap/helpers.d.ts +2 -1
  29. package/ReltioMap/helpers.js +3 -11
  30. package/ReltioMap/types.d.ts +2 -2
  31. package/cjs/AttributesView/AttributesView.test.js +8 -2
  32. package/cjs/EditModeAttributesPager/components/SpecialRenderer/SpecialRenderer.js +4 -1
  33. package/cjs/ReltioMap/ReltioMap.d.ts +5 -8
  34. package/cjs/ReltioMap/ReltioMap.js +29 -37
  35. package/cjs/ReltioMap/ReltioMap.spec.js +298 -103
  36. package/cjs/ReltioMap/components/ClusteredMarkers/ClusteredMarkers.d.ts +2 -1
  37. package/cjs/ReltioMap/components/ClusteredMarkers/ClusteredMarkers.js +11 -13
  38. package/cjs/ReltioMap/components/EntityMarker/EntityMarker.d.ts +2 -1
  39. package/cjs/ReltioMap/components/EntityMarker/EntityMarker.js +3 -3
  40. package/cjs/ReltioMap/components/PolygonDrawing/PolygonDrawing.d.ts +4 -0
  41. package/cjs/ReltioMap/components/PolygonDrawing/PolygonDrawing.js +22 -0
  42. package/cjs/ReltioMap/components/PolygonDrawing/crosshair.inline.svg.d.ts +1 -0
  43. package/cjs/ReltioMap/components/PolygonDrawing/crosshair.inline.svg.js +4 -0
  44. package/cjs/ReltioMap/components/PolygonDrawing/index.d.ts +2 -0
  45. package/cjs/ReltioMap/components/PolygonDrawing/index.js +7 -0
  46. package/cjs/ReltioMap/components/PolygonDrawing/polygonRingHelpers.d.ts +5 -0
  47. package/cjs/ReltioMap/components/PolygonDrawing/polygonRingHelpers.js +50 -0
  48. package/cjs/ReltioMap/components/PolygonDrawing/useDrawingCursors.d.ts +6 -0
  49. package/cjs/ReltioMap/components/PolygonDrawing/useDrawingCursors.js +91 -0
  50. package/cjs/ReltioMap/components/PolygonDrawing/usePolygonDrawing.d.ts +9 -0
  51. package/cjs/ReltioMap/components/PolygonDrawing/usePolygonDrawing.js +202 -0
  52. package/cjs/ReltioMap/components/PolygonDrawing/usePreviewPolylines.d.ts +7 -0
  53. package/cjs/ReltioMap/components/PolygonDrawing/usePreviewPolylines.js +42 -0
  54. package/cjs/ReltioMap/components/PolygonDrawing/useVertexHandles.d.ts +14 -0
  55. package/cjs/ReltioMap/components/PolygonDrawing/useVertexHandles.js +89 -0
  56. package/cjs/ReltioMap/components/TopRightMapControls/TopRightMapControls.d.ts +3 -3
  57. package/cjs/ReltioMap/components/TopRightMapControls/TopRightMapControls.js +3 -17
  58. package/cjs/ReltioMap/helpers.d.ts +2 -1
  59. package/cjs/ReltioMap/helpers.js +8 -15
  60. package/cjs/ReltioMap/types.d.ts +2 -2
  61. package/cjs/constants/index.d.ts +1 -1
  62. package/cjs/constants/index.js +2 -2
  63. package/cjs/constants/map.d.ts +1 -2
  64. package/cjs/constants/map.js +2 -5
  65. package/cjs/features/workflow/AddWorkflowDialog/styles.d.ts +1 -1
  66. package/cjs/icons/index.d.ts +0 -1
  67. package/cjs/icons/index.js +2 -4
  68. package/constants/index.d.ts +1 -1
  69. package/constants/index.js +1 -1
  70. package/constants/map.d.ts +1 -2
  71. package/constants/map.js +1 -4
  72. package/features/workflow/AddWorkflowDialog/styles.d.ts +1 -1
  73. package/icons/index.d.ts +0 -1
  74. package/icons/index.js +0 -1
  75. package/package.json +2 -2
  76. package/ReltioMap/components/DrawingManager/DrawingManager.d.ts +0 -2
  77. package/ReltioMap/components/DrawingManager/DrawingManager.js +0 -5
  78. package/ReltioMap/components/DrawingManager/index.d.ts +0 -1
  79. package/ReltioMap/components/DrawingManager/index.js +0 -1
  80. package/ReltioMap/components/DrawingManager/useDrawingManager.d.ts +0 -7
  81. package/ReltioMap/components/DrawingManager/useDrawingManager.js +0 -36
  82. package/ReltioMap/googleMock.test-data.d.ts +0 -1
  83. package/ReltioMap/googleMock.test-data.js +0 -109
  84. package/cjs/ReltioMap/components/DrawingManager/DrawingManager.d.ts +0 -2
  85. package/cjs/ReltioMap/components/DrawingManager/DrawingManager.js +0 -9
  86. package/cjs/ReltioMap/components/DrawingManager/index.d.ts +0 -1
  87. package/cjs/ReltioMap/components/DrawingManager/index.js +0 -5
  88. package/cjs/ReltioMap/components/DrawingManager/useDrawingManager.d.ts +0 -7
  89. package/cjs/ReltioMap/components/DrawingManager/useDrawingManager.js +0 -40
  90. package/cjs/ReltioMap/googleMock.test-data.d.ts +0 -1
  91. package/cjs/ReltioMap/googleMock.test-data.js +0 -113
  92. package/cjs/icons/Radius.d.ts +0 -3
  93. package/cjs/icons/Radius.js +0 -22
  94. package/icons/Radius.d.ts +0 -3
  95. package/icons/Radius.js +0 -17
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { DrawingMode, DrawingModes } from '../../types';
2
+ import { DrawingMode } from '../../types';
3
3
  export declare const ButtonWithTooltip: React.ForwardRefExoticComponent<Omit<{
4
4
  tooltipTitle?: import("@mui/material").TooltipProps["title"];
5
5
  tooltipPlacement?: import("@mui/material").TooltipProps["placement"];
@@ -42,9 +42,9 @@ type Props = {
42
42
  className?: string;
43
43
  onDrawingModeChanged: (value: DrawingMode | null) => void;
44
44
  drawingMode: DrawingMode | null;
45
- drawingModes: DrawingModes;
45
+ enablePolygonDrawing: boolean;
46
46
  hasActiveOverlay: boolean;
47
47
  onClearOverlay: () => void;
48
48
  };
49
- export declare const TopRightMapControls: ({ className, drawingMode, drawingModes, hasActiveOverlay, onDrawingModeChanged, onClearOverlay }: Props) => React.JSX.Element;
49
+ export declare const TopRightMapControls: ({ className, drawingMode, enablePolygonDrawing, hasActiveOverlay, onDrawingModeChanged, onClearOverlay }: Props) => React.JSX.Element;
50
50
  export {};
@@ -4,31 +4,17 @@ import i18n from 'ui-i18n';
4
4
  import Button from '@mui/material/Button';
5
5
  import { withTooltip } from '../../../HOCs/withTooltip';
6
6
  import HighlightOffIcon from '@mui/icons-material/HighlightOff';
7
- import { MAP_DRAWING_MODES } from '../../../constants';
8
- import RadiusIcon from '../../../icons/Radius';
7
+ import { POLYGON_DRAWING_MODE } from '../../../constants';
9
8
  import DrawIcon from '../../../icons/Draw';
10
9
  import { useStyles } from './styles';
11
10
  export var ButtonWithTooltip = withTooltip(Button);
12
- var getIcon = function (mode) {
13
- switch (mode) {
14
- case MAP_DRAWING_MODES.CIRCLE:
15
- return RadiusIcon;
16
- case MAP_DRAWING_MODES.POLYGON:
17
- return DrawIcon;
18
- default:
19
- return null;
20
- }
21
- };
22
11
  export var TopRightMapControls = function (_a) {
23
- var className = _a.className, drawingMode = _a.drawingMode, _b = _a.drawingModes, drawingModes = _b === void 0 ? [] : _b, hasActiveOverlay = _a.hasActiveOverlay, onDrawingModeChanged = _a.onDrawingModeChanged, onClearOverlay = _a.onClearOverlay;
12
+ var className = _a.className, drawingMode = _a.drawingMode, enablePolygonDrawing = _a.enablePolygonDrawing, hasActiveOverlay = _a.hasActiveOverlay, onDrawingModeChanged = _a.onDrawingModeChanged, onClearOverlay = _a.onClearOverlay;
24
13
  var styles = useStyles();
25
14
  var changeDrawingModeTo = function (drawingMode) { return function () {
26
15
  onDrawingModeChanged(drawingMode);
27
16
  }; };
28
17
  return (React.createElement("div", { className: classnames(styles.container, className) }, drawingMode || hasActiveOverlay ? (React.createElement(ButtonWithTooltip, { tooltipTitle: i18n.text('Clear area'), className: styles.button, onClick: hasActiveOverlay ? onClearOverlay : changeDrawingModeTo(null) },
29
- React.createElement(HighlightOffIcon, { className: styles.icon }))) : (drawingModes.map(function (mode) {
30
- var Icon = getIcon(mode);
31
- return (React.createElement(ButtonWithTooltip, { tooltipTitle: i18n.text('Draw area'), key: mode, className: styles.button, onClick: changeDrawingModeTo(mode) },
32
- React.createElement(Icon, { className: styles.icon })));
33
- }))));
18
+ React.createElement(HighlightOffIcon, { className: styles.icon }))) : (enablePolygonDrawing && (React.createElement(ButtonWithTooltip, { tooltipTitle: i18n.text('Draw area'), className: styles.button, onClick: changeDrawingModeTo(POLYGON_DRAWING_MODE) },
19
+ React.createElement(DrawIcon, { className: styles.icon }))))));
34
20
  };
@@ -1,6 +1,7 @@
1
1
  import { GeoPoint } from '@reltio/mdm-sdk';
2
2
  import { DrawingMode, Overlay, MapInstance } from './types';
3
+ export declare const isDomElement: (el: unknown) => el is Element;
3
4
  export declare const getMapBoundsPolygon: (map: MapInstance) => any[];
4
- export declare const getDrawingMode: (drawingMode: DrawingMode) => google.maps.drawing.OverlayType.CIRCLE | google.maps.drawing.OverlayType.POLYGON;
5
+ export declare const isActivePolygonDrawing: (drawingMode: DrawingMode) => boolean;
5
6
  export declare const fitMapBoundsForMarkers: (markers: GeoPoint[], map: MapInstance, overlay: Overlay) => void;
6
7
  export declare const fitMapBoundsForOverlay: (map: MapInstance, overlay: Overlay, existingBounds?: any) => void;
@@ -7,7 +7,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
7
7
  }
8
8
  return to.concat(ar || Array.prototype.slice.call(from));
9
9
  };
10
- import { MAP_DRAWING_MODES, MAP_MINIMUM_SCALE_RADIUS } from '../constants/map';
10
+ import { MAP_MINIMUM_SCALE_RADIUS, POLYGON_DRAWING_MODE } from '../constants';
11
+ export var isDomElement = function (el) { return typeof Element !== 'undefined' && el instanceof Element; };
11
12
  export var getMapBoundsPolygon = function (map) {
12
13
  var bounds = map.getBounds();
13
14
  var ne = bounds.getNorthEast();
@@ -25,16 +26,7 @@ export var getMapBoundsPolygon = function (map) {
25
26
  }
26
27
  return __spreadArray(__spreadArray(__spreadArray(__spreadArray([[neLat, neLng]], additionalPoint1, true), [[neLat, swLng], [swLat, swLng]], false), additionalPoint2, true), [[swLat, neLng]], false);
27
28
  };
28
- export var getDrawingMode = function (drawingMode) {
29
- switch (drawingMode) {
30
- case MAP_DRAWING_MODES.CIRCLE:
31
- return window.google.maps.drawing.OverlayType.CIRCLE;
32
- case MAP_DRAWING_MODES.POLYGON:
33
- return window.google.maps.drawing.OverlayType.POLYGON;
34
- default:
35
- return null;
36
- }
37
- };
29
+ export var isActivePolygonDrawing = function (drawingMode) { return drawingMode === POLYGON_DRAWING_MODE; };
38
30
  export var fitMapBoundsForMarkers = function (markers, map, overlay) {
39
31
  var bounds = new window.google.maps.LatLngBounds();
40
32
  markers.forEach(function (marker) { return bounds.extend(marker.point); });
@@ -1,6 +1,6 @@
1
1
  import { Marker } from '@googlemaps/markerclusterer';
2
- export type DrawingMode = 'circle' | 'polygon';
3
- export type DrawingModes = DrawingMode[];
2
+ import { POLYGON_DRAWING_MODE } from '../constants/map';
3
+ export type DrawingMode = typeof POLYGON_DRAWING_MODE;
4
4
  export type ClusteredMarkersOptions = {
5
5
  maxZoom?: number;
6
6
  calculator?: (markers: Marker[]) => {
@@ -52,6 +52,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
52
52
  Object.defineProperty(exports, "__esModule", { value: true });
53
53
  var react_1 = __importDefault(require("react"));
54
54
  var mdm_sdk_1 = require("@reltio/mdm-sdk");
55
+ var LocalizationProvider_1 = require("@mui/x-date-pickers/LocalizationProvider");
56
+ var AdapterMoment_1 = require("@mui/x-date-pickers/AdapterMoment");
55
57
  var AttributesView_1 = require("./AttributesView");
56
58
  var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
57
59
  var react_2 = require("@testing-library/react");
@@ -115,7 +117,8 @@ describe('AttributesView tests', function () {
115
117
  if (mdmValues === void 0) { mdmValues = mdmDefaultValues; }
116
118
  var Providers = function (_a) {
117
119
  var children = _a.children;
118
- return (react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues, actions: actions }, children));
120
+ return (react_1.default.createElement(LocalizationProvider_1.LocalizationProvider, { dateAdapter: AdapterMoment_1.AdapterMoment },
121
+ react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues, actions: actions }, children)));
119
122
  };
120
123
  var user = user_event_1.default.setup();
121
124
  return __assign(__assign({}, (0, react_2.render)(react_1.default.createElement(AttributesView_1.AttributesView, __assign({}, props)), { wrapper: Providers })), { user: user });
@@ -156,11 +159,14 @@ describe('AttributesView tests', function () {
156
159
  it('should render always visible attributes in editing mode', function () {
157
160
  var alwaysVisible = [
158
161
  'configuration/entityTypes/HCP/attributes/LastName',
159
- 'configuration/entityTypes/HCP/attributes/Phone'
162
+ 'configuration/entityTypes/HCP/attributes/Phone',
163
+ 'startDate'
160
164
  ];
161
165
  setUp({ mode: mdm_sdk_1.Mode.Editing, entity: entity, alwaysVisible: alwaysVisible });
162
166
  expect(react_2.screen.getByText('Last Name')).toBeInTheDocument();
163
167
  expect(react_2.screen.getByText('Phone')).toBeInTheDocument();
168
+ expect(react_2.screen.getByText('Start date')).toBeInTheDocument();
169
+ expect(react_2.screen.queryByText('End date')).not.toBeInTheDocument();
164
170
  });
165
171
  it('should render always visible attributes in read mode for entity without filled attributes', function () {
166
172
  var alwaysVisible = [
@@ -61,6 +61,7 @@ var RolesEditor_1 = require("../../../RolesEditor");
61
61
  var TagsEditor_1 = require("../../../TagsEditor");
62
62
  var HasDeletionsContext_1 = require("../../../contexts/HasDeletionsContext");
63
63
  var withContext_1 = require("../../../HOCs/withContext");
64
+ var AlwaysVisibleAttributesContext_1 = require("../../../contexts/AlwaysVisibleAttributesContext");
64
65
  var useScrollToAttribute_1 = require("../../../hooks/useScrollToAttribute");
65
66
  var styles_1 = require("../../styles");
66
67
  var SpecialRenderer = function (_a) {
@@ -80,7 +81,9 @@ var SpecialRenderer = function (_a) {
80
81
  updateHasDeletions
81
82
  ]);
82
83
  var isEmptyValues = (0, mdm_sdk_1.isEmptyValue)(values);
83
- var showEmpty = !hasDeletions && showEmptyEditors && isEmptyValues;
84
+ var alwaysVisibleAttributes = (0, react_1.useContext)(AlwaysVisibleAttributesContext_1.AlwaysVisibleAttributesContext);
85
+ var isAlwaysVisible = (0, react_1.useMemo)(function () { return alwaysVisibleAttributes === null || alwaysVisibleAttributes === void 0 ? void 0 : alwaysVisibleAttributes.includes(attributeType.uri); }, [attributeType.uri, alwaysVisibleAttributes]);
86
+ var showEmpty = ((!hasDeletions && showEmptyEditors) || isAlwaysVisible) && isEmptyValues;
84
87
  var emptyEditorValue = (0, react_1.useRef)((0, mdm_sdk_1.createNewAttribute)({
85
88
  parentUri: parentUri,
86
89
  attributeType: attributeType
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { GeoPoint } from '@reltio/mdm-sdk';
3
- import { DrawingModes, MapBounds, Overlay, ClusteredMarkersOptions, DrawingMode } from './types';
3
+ import { MapBounds, Overlay, ClusteredMarkersOptions, DrawingMode } from './types';
4
4
  type Props = {
5
5
  markers?: GeoPoint[];
6
6
  mapKey: string;
@@ -12,20 +12,17 @@ type Props = {
12
12
  isSearchOnMapMove?: boolean;
13
13
  isSearchEnabled?: boolean;
14
14
  activeOverlay?: Overlay;
15
- overlayOptions?: google.maps.PolygonOptions | google.maps.CircleOptions;
16
- drawingModes?: DrawingModes;
15
+ overlayOptions?: google.maps.PolygonOptions;
16
+ enablePolygonDrawing?: boolean;
17
17
  markerClusterer?: boolean;
18
18
  markerClustererOptions?: ClusteredMarkersOptions;
19
19
  mapOptions?: google.maps.MapOptions;
20
20
  mapContainerClassName?: string;
21
21
  onMapBoundsChanged?: (value: MapBounds | null) => void;
22
22
  onOverlayUpdated?: (value: {
23
- data: number[][] | {
24
- radius: number;
25
- center: google.maps.LatLng;
26
- };
23
+ data: number[][];
27
24
  type: DrawingMode;
28
- }) => void;
25
+ } | null) => void;
29
26
  onMarkerClicked?: (value: GeoPoint) => void;
30
27
  };
31
28
  export declare const ReltioMap: ({ mapKey, ...restProps }: Props) => React.JSX.Element;
@@ -54,12 +54,12 @@ var TopCenterMapControls_1 = require("./components/TopCenterMapControls");
54
54
  var helpers_1 = require("./helpers");
55
55
  var constants_1 = require("../constants");
56
56
  var useFitMapBounds_1 = require("./useFitMapBounds");
57
- var styles_1 = require("./styles");
58
57
  var ClusteredMarkers_1 = require("./components/ClusteredMarkers");
59
58
  var Polygon_1 = require("./components/Polygon");
60
- var DrawingManager_1 = require("./components/DrawingManager");
59
+ var PolygonDrawing_1 = require("./components/PolygonDrawing");
60
+ var styles_1 = require("./styles");
61
61
  var ON_MAP_MOVE_DEBOUNCE_INTERVAL = 1000;
62
- var libraries = ['drawing'];
62
+ var libraries = ['marker'];
63
63
  var ReltioMap = function (_a) {
64
64
  var mapKey = _a.mapKey, restProps = __rest(_a, ["mapKey"]);
65
65
  return (react_1.default.createElement(react_google_maps_1.APIProvider, { apiKey: mapKey, libraries: libraries },
@@ -69,7 +69,7 @@ exports.ReltioMap = ReltioMap;
69
69
  var emptyObject = {};
70
70
  var emptyArray = [];
71
71
  var InternalReltioMap = (0, react_1.memo)(function (_a) {
72
- var mapId = _a.mapId, _b = _a.markers, markers = _b === void 0 ? emptyArray : _b, defaultZoom = _a.defaultZoom, defaultCenter = _a.defaultCenter, loadingElement = _a.loadingElement, isSearchOnMapMove = _a.isSearchOnMapMove, isSearchEnabled = _a.isSearchEnabled, activeOverlay = _a.activeOverlay, _c = _a.overlayOptions, overlayOptions = _c === void 0 ? emptyObject : _c, _d = _a.drawingModes, drawingModes = _d === void 0 ? emptyArray : _d, markerClusterer = _a.markerClusterer, markerClustererOptions = _a.markerClustererOptions, _f = _a.mapOptions, mapOptions = _f === void 0 ? emptyObject : _f, mapContainerClassName = _a.mapContainerClassName, _g = _a.onMapBoundsChanged, onMapBoundsChanged = _g === void 0 ? ramda_1.identity : _g, _h = _a.onOverlayUpdated, onOverlayUpdated = _h === void 0 ? ramda_1.identity : _h, _j = _a.onMarkerClicked, onMarkerClicked = _j === void 0 ? ramda_1.identity : _j;
72
+ var mapId = _a.mapId, _b = _a.markers, markers = _b === void 0 ? emptyArray : _b, defaultZoom = _a.defaultZoom, defaultCenter = _a.defaultCenter, loadingElement = _a.loadingElement, isSearchOnMapMove = _a.isSearchOnMapMove, isSearchEnabled = _a.isSearchEnabled, activeOverlay = _a.activeOverlay, _c = _a.overlayOptions, overlayOptions = _c === void 0 ? emptyObject : _c, _d = _a.enablePolygonDrawing, enablePolygonDrawing = _d === void 0 ? false : _d, markerClusterer = _a.markerClusterer, markerClustererOptions = _a.markerClustererOptions, _f = _a.mapOptions, mapOptions = _f === void 0 ? emptyObject : _f, mapContainerClassName = _a.mapContainerClassName, _g = _a.onMapBoundsChanged, onMapBoundsChanged = _g === void 0 ? ramda_1.identity : _g, _h = _a.onOverlayUpdated, onOverlayUpdated = _h === void 0 ? ramda_1.identity : _h, _j = _a.onMarkerClicked, onMarkerClicked = _j === void 0 ? ramda_1.identity : _j;
73
73
  var styles = (0, styles_1.useStyles)();
74
74
  var mapMoveEndTimer = (0, react_1.useRef)(null);
75
75
  var isLoaded = (0, react_google_maps_1.useApiIsLoaded)();
@@ -79,10 +79,15 @@ var InternalReltioMap = (0, react_1.memo)(function (_a) {
79
79
  (0, useFitMapBounds_1.useFitMapBounds)({ markers: markers, activeOverlay: activeOverlay, map: map, isSearchOnMapMove: isSearchOnMapMove });
80
80
  var allOverlayOptions = (0, react_1.useMemo)(function () { return (__assign(__assign({}, constants_1.DEFAULT_OVERLAY_OPTIONS), overlayOptions)); }, [overlayOptions]);
81
81
  var googleMapOptions = (0, react_1.useMemo)(function () { return (__assign(__assign({}, constants_1.DEFAULT_GOOGLE_MAP_OPTIONS), mapOptions)); }, [mapOptions]);
82
- var drawingManagerOptions = (0, react_1.useMemo)(function () { return ({
83
- drawingControl: false,
84
- polygonOptions: allOverlayOptions
85
- }); }, [allOverlayOptions]);
82
+ var previewPolylineOptions = (0, react_1.useMemo)(function () {
83
+ var _a;
84
+ return ({
85
+ strokeColor: allOverlayOptions.strokeColor,
86
+ strokeWeight: allOverlayOptions.strokeWeight,
87
+ zIndex: ((_a = allOverlayOptions.zIndex) !== null && _a !== void 0 ? _a : 1) + 1
88
+ });
89
+ }, [allOverlayOptions]);
90
+ var completedPolygonDrawingOptions = (0, react_1.useMemo)(function () { return (__assign(__assign({}, allOverlayOptions), { editable: false })); }, [allOverlayOptions]);
86
91
  var polygonOptions = (0, react_1.useMemo)(function () { return (__assign({ paths: activeOverlay === null || activeOverlay === void 0 ? void 0 : activeOverlay.path, editable: true }, allOverlayOptions)); }, [activeOverlay, allOverlayOptions]);
87
92
  var handleChangeIsSearchOnMapMove = (0, react_1.useCallback)(function (isSearchOnMapMove) {
88
93
  onMapBoundsChanged(isSearchOnMapMove ? (0, helpers_1.getMapBoundsPolygon)(map) : null);
@@ -104,54 +109,41 @@ var InternalReltioMap = (0, react_1.memo)(function (_a) {
104
109
  mapMoveEndTimer.current = setTimeout(handleMapMoveEnd, ON_MAP_MOVE_DEBOUNCE_INTERVAL);
105
110
  }, [handleMapMoveEnd, isSearchOnMapMove]);
106
111
  var handleOverlayChange = (0, react_1.useCallback)(function (_e, propOverlay) {
107
- var _a;
108
- var _b;
109
- var polygonStateOverlay = polygon && { type: constants_1.MAP_DRAWING_MODES.POLYGON, overlay: polygon };
112
+ var polygonStateOverlay = polygon && { type: constants_1.POLYGON_DRAWING_MODE, overlay: polygon };
110
113
  var stateOverlay = propOverlay || polygonStateOverlay;
111
114
  if ((0, ramda_1.isEmpty)(stateOverlay))
112
115
  return;
113
116
  var overlay = stateOverlay.overlay, type = stateOverlay.type;
114
- var getPolygonLatLngCoordinates = function () {
115
- return overlay
116
- .getPath()
117
- .getArray()
118
- .map(function (latlng) { return [latlng.lat(), latlng.lng()]; });
119
- };
120
- var getCircleParameters = function () { return ({
121
- radius: overlay.getRadius() / 1000,
122
- center: overlay.getCenter()
123
- }); };
124
- var typeActions = (_a = {},
125
- _a[constants_1.MAP_DRAWING_MODES.POLYGON] = getPolygonLatLngCoordinates,
126
- _a[constants_1.MAP_DRAWING_MODES.CIRCLE] = getCircleParameters,
127
- _a);
128
- var data = (_b = typeActions[type]) === null || _b === void 0 ? void 0 : _b.call(typeActions);
129
- if (!data)
130
- return;
117
+ var data = overlay
118
+ .getPath()
119
+ .getArray()
120
+ .map(function (latlng) { return [latlng.lat(), latlng.lng()]; });
131
121
  onOverlayUpdated({ data: data, type: type });
132
122
  }, [onOverlayUpdated, polygon]);
133
- var handleOverlayComplete = (0, react_1.useCallback)(function (type) { return function (overlay) {
134
- handleOverlayChange(null, { type: type, overlay: overlay });
123
+ var onPolygonDrawingComplete = (0, react_1.useCallback)(function (overlay) {
124
+ handleOverlayChange(null, { type: constants_1.POLYGON_DRAWING_MODE, overlay: overlay });
135
125
  overlay.setMap(null);
136
126
  setDrawingMode(null);
137
- }; }, [handleOverlayChange]);
127
+ }, [handleOverlayChange]);
138
128
  var handleClearOverlay = (0, react_1.useCallback)(function () {
139
129
  onOverlayUpdated(null);
140
130
  }, [onOverlayUpdated]);
141
131
  if (!isLoaded) {
142
132
  return loadingElement;
143
133
  }
144
- var shouldRenderDrawingManager = isSearchEnabled && Boolean(drawingModes.length);
145
- var shouldRenderRightMapControls = map && isSearchEnabled && Boolean(drawingModes.length);
134
+ var shouldRenderPolygonDrawing = isSearchEnabled && enablePolygonDrawing;
135
+ var shouldRenderRightMapControls = map && isSearchEnabled && enablePolygonDrawing;
146
136
  var shouldRenderCenterMapControls = map && isSearchEnabled;
147
- var shouldRenderPolygon = !(0, helpers_1.getDrawingMode)(drawingMode) && activeOverlay && (0, ramda_1.propEq)('type', constants_1.MAP_DRAWING_MODES.POLYGON, activeOverlay);
137
+ var shouldRenderPolygon = !(0, helpers_1.isActivePolygonDrawing)(drawingMode) &&
138
+ activeOverlay &&
139
+ (0, ramda_1.propEq)('type', constants_1.POLYGON_DRAWING_MODE, activeOverlay);
148
140
  return (react_1.default.createElement(react_google_maps_1.Map, __assign({ mapId: mapId || 'mapId' }, googleMapOptions, { defaultZoom: defaultZoom, defaultCenter: defaultCenter, onZoomChanged: handleMapMoveStart, onDragstart: handleMapMoveStart, onIdle: handleMapIdle, className: mapContainerClassName }),
149
141
  shouldRenderRightMapControls && (react_1.default.createElement(react_google_maps_1.MapControl, { position: react_google_maps_1.ControlPosition.TOP_RIGHT },
150
- react_1.default.createElement(TopRightMapControls_1.TopRightMapControls, { className: styles.mapControlContainer, hasActiveOverlay: !!activeOverlay, drawingModes: drawingModes, drawingMode: drawingMode, onDrawingModeChanged: setDrawingMode, onClearOverlay: handleClearOverlay }))),
142
+ react_1.default.createElement(TopRightMapControls_1.TopRightMapControls, { className: styles.mapControlContainer, hasActiveOverlay: !!activeOverlay, enablePolygonDrawing: enablePolygonDrawing, drawingMode: drawingMode, onDrawingModeChanged: setDrawingMode, onClearOverlay: handleClearOverlay }))),
151
143
  shouldRenderCenterMapControls && (react_1.default.createElement(react_google_maps_1.MapControl, { position: react_google_maps_1.ControlPosition.TOP_CENTER },
152
144
  react_1.default.createElement(TopCenterMapControls_1.TopCenterMapControls, { className: styles.mapControlContainer, onChangeIsSearchOnMapMove: handleChangeIsSearchOnMapMove, isSearchOnMapMove: isSearchOnMapMove }))),
153
- react_1.default.createElement(ClusteredMarkers_1.ClusteredMarkers, { entityMarkers: markers, enabledClustering: markerClusterer, options: markerClustererOptions, onMarkerClick: onMarkerClicked }),
145
+ react_1.default.createElement(ClusteredMarkers_1.ClusteredMarkers, { entityMarkers: markers, enabledClustering: markerClusterer, options: markerClustererOptions, onMarkerClick: onMarkerClicked, disabled: (0, helpers_1.isActivePolygonDrawing)(drawingMode) }),
154
146
  shouldRenderPolygon && (react_1.default.createElement(Polygon_1.Polygon, { onInit: setPolygon, options: polygonOptions, onMouseUp: handleOverlayChange, onDragEnd: handleOverlayChange })),
155
- shouldRenderDrawingManager && (react_1.default.createElement(DrawingManager_1.DrawingManager, { onPolygonComplete: handleOverlayComplete(constants_1.MAP_DRAWING_MODES.POLYGON), onCircleComplete: handleOverlayComplete(constants_1.MAP_DRAWING_MODES.CIRCLE), drawingMode: (0, helpers_1.getDrawingMode)(drawingMode), options: drawingManagerOptions }))));
147
+ shouldRenderPolygonDrawing && (react_1.default.createElement(PolygonDrawing_1.PolygonDrawing, { isActive: (0, helpers_1.isActivePolygonDrawing)(drawingMode), previewPolylineOptions: previewPolylineOptions, completedPolygonOptions: completedPolygonDrawingOptions, onPolygonComplete: onPolygonDrawingComplete }))));
156
148
  });
157
149
  InternalReltioMap.displayName = 'InternalReltioMap';