@reltio/components 1.4.2257 → 1.4.2258

package/ReltioMap/components/TopRightMapControls/TopRightMapControls.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DrawingMode, DrawingModes } from '../../types';
+import { DrawingMode } from '../../types';
 export declare const ButtonWithTooltip: React.ForwardRefExoticComponent<Omit<{
     tooltipTitle?: import("@mui/material").TooltipProps["title"];
     tooltipPlacement?: import("@mui/material").TooltipProps["placement"];
@@ -42,9 +42,9 @@ type Props = {
     className?: string;
     onDrawingModeChanged: (value: DrawingMode | null) => void;
     drawingMode: DrawingMode | null;
-    drawingModes: DrawingModes;
+    enablePolygonDrawing: boolean;
     hasActiveOverlay: boolean;
     onClearOverlay: () => void;
 };
-export declare const TopRightMapControls: ({ className, drawingMode, drawingModes, hasActiveOverlay, onDrawingModeChanged, onClearOverlay }: Props) => React.JSX.Element;
+export declare const TopRightMapControls: ({ className, drawingMode, enablePolygonDrawing, hasActiveOverlay, onDrawingModeChanged, onClearOverlay }: Props) => React.JSX.Element;
 export {};

package/ReltioMap/components/TopRightMapControls/TopRightMapControls.js

@@ -4,31 +4,17 @@ import i18n from 'ui-i18n';
 import Button from '@mui/material/Button';
 import { withTooltip } from '../../../HOCs/withTooltip';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
-import { MAP_DRAWING_MODES } from '../../../constants';
-import RadiusIcon from '../../../icons/Radius';
+import { POLYGON_DRAWING_MODE } from '../../../constants';
 import DrawIcon from '../../../icons/Draw';
 import { useStyles } from './styles';
 export var ButtonWithTooltip = withTooltip(Button);
-var getIcon = function (mode) {
-    switch (mode) {
-        case MAP_DRAWING_MODES.CIRCLE:
-            return RadiusIcon;
-        case MAP_DRAWING_MODES.POLYGON:
-            return DrawIcon;
-        default:
-            return null;
-    }
-};
 export var TopRightMapControls = function (_a) {
-    var className = _a.className, drawingMode = _a.drawingMode, _b = _a.drawingModes, drawingModes = _b === void 0 ? [] : _b, hasActiveOverlay = _a.hasActiveOverlay, onDrawingModeChanged = _a.onDrawingModeChanged, onClearOverlay = _a.onClearOverlay;
+    var className = _a.className, drawingMode = _a.drawingMode, enablePolygonDrawing = _a.enablePolygonDrawing, hasActiveOverlay = _a.hasActiveOverlay, onDrawingModeChanged = _a.onDrawingModeChanged, onClearOverlay = _a.onClearOverlay;
     var styles = useStyles();
     var changeDrawingModeTo = function (drawingMode) { return function () {
         onDrawingModeChanged(drawingMode);
     }; };
     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) },
-        React.createElement(HighlightOffIcon, { className: styles.icon }))) : (drawingModes.map(function (mode) {
-        var Icon = getIcon(mode);
-        return (React.createElement(ButtonWithTooltip, { tooltipTitle: i18n.text('Draw area'), key: mode, className: styles.button, onClick: changeDrawingModeTo(mode) },
-            React.createElement(Icon, { className: styles.icon })));
-    }))));
+        React.createElement(HighlightOffIcon, { className: styles.icon }))) : (enablePolygonDrawing && (React.createElement(ButtonWithTooltip, { tooltipTitle: i18n.text('Draw area'), className: styles.button, onClick: changeDrawingModeTo(POLYGON_DRAWING_MODE) },
+        React.createElement(DrawIcon, { className: styles.icon }))))));
 };

package/ReltioMap/helpers.d.ts

@@ -1,6 +1,7 @@
 import { GeoPoint } from '@reltio/mdm-sdk';
 import { DrawingMode, Overlay, MapInstance } from './types';
+export declare const isDomElement: (el: unknown) => el is Element;
 export declare const getMapBoundsPolygon: (map: MapInstance) => any[];
-export declare const getDrawingMode: (drawingMode: DrawingMode) => google.maps.drawing.OverlayType.CIRCLE | google.maps.drawing.OverlayType.POLYGON;
+export declare const isActivePolygonDrawing: (drawingMode: DrawingMode) => boolean;
 export declare const fitMapBoundsForMarkers: (markers: GeoPoint[], map: MapInstance, overlay: Overlay) => void;
 export declare const fitMapBoundsForOverlay: (map: MapInstance, overlay: Overlay, existingBounds?: any) => void;

package/ReltioMap/helpers.js

@@ -7,7 +7,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { MAP_DRAWING_MODES, MAP_MINIMUM_SCALE_RADIUS } from '../constants/map';
+import { MAP_MINIMUM_SCALE_RADIUS, POLYGON_DRAWING_MODE } from '../constants';
+export var isDomElement = function (el) { return typeof Element !== 'undefined' && el instanceof Element; };
 export var getMapBoundsPolygon = function (map) {
     var bounds = map.getBounds();
     var ne = bounds.getNorthEast();
@@ -25,16 +26,7 @@ export var getMapBoundsPolygon = function (map) {
     }
     return __spreadArray(__spreadArray(__spreadArray(__spreadArray([[neLat, neLng]], additionalPoint1, true), [[neLat, swLng], [swLat, swLng]], false), additionalPoint2, true), [[swLat, neLng]], false);
 };
-export var getDrawingMode = function (drawingMode) {
-    switch (drawingMode) {
-        case MAP_DRAWING_MODES.CIRCLE:
-            return window.google.maps.drawing.OverlayType.CIRCLE;
-        case MAP_DRAWING_MODES.POLYGON:
-            return window.google.maps.drawing.OverlayType.POLYGON;
-        default:
-            return null;
-    }
-};
+export var isActivePolygonDrawing = function (drawingMode) { return drawingMode === POLYGON_DRAWING_MODE; };
 export var fitMapBoundsForMarkers = function (markers, map, overlay) {
     var bounds = new window.google.maps.LatLngBounds();
     markers.forEach(function (marker) { return bounds.extend(marker.point); });

package/ReltioMap/types.d.ts

@@ -1,6 +1,6 @@
 import { Marker } from '@googlemaps/markerclusterer';
-export type DrawingMode = 'circle' | 'polygon';
-export type DrawingModes = DrawingMode[];
+import { POLYGON_DRAWING_MODE } from '../constants/map';
+export type DrawingMode = typeof POLYGON_DRAWING_MODE;
 export type ClusteredMarkersOptions = {
     maxZoom?: number;
     calculator?: (markers: Marker[]) => {

package/cjs/ReltioMap/ReltioMap.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { GeoPoint } from '@reltio/mdm-sdk';
-import { DrawingModes, MapBounds, Overlay, ClusteredMarkersOptions, DrawingMode } from './types';
+import { MapBounds, Overlay, ClusteredMarkersOptions, DrawingMode } from './types';
 type Props = {
     markers?: GeoPoint[];
     mapKey: string;
@@ -12,20 +12,17 @@ type Props = {
     isSearchOnMapMove?: boolean;
     isSearchEnabled?: boolean;
     activeOverlay?: Overlay;
-    overlayOptions?: google.maps.PolygonOptions | google.maps.CircleOptions;
-    drawingModes?: DrawingModes;
+    overlayOptions?: google.maps.PolygonOptions;
+    enablePolygonDrawing?: boolean;
     markerClusterer?: boolean;
     markerClustererOptions?: ClusteredMarkersOptions;
     mapOptions?: google.maps.MapOptions;
     mapContainerClassName?: string;
     onMapBoundsChanged?: (value: MapBounds | null) => void;
     onOverlayUpdated?: (value: {
-        data: number[][] | {
-            radius: number;
-            center: google.maps.LatLng;
-        };
+        data: number[][];
         type: DrawingMode;
-    }) => void;
+    } | null) => void;
     onMarkerClicked?: (value: GeoPoint) => void;
 };
 export declare const ReltioMap: ({ mapKey, ...restProps }: Props) => React.JSX.Element;

package/cjs/ReltioMap/ReltioMap.js

@@ -54,12 +54,12 @@ var TopCenterMapControls_1 = require("./components/TopCenterMapControls");
 var helpers_1 = require("./helpers");
 var constants_1 = require("../constants");
 var useFitMapBounds_1 = require("./useFitMapBounds");
-var styles_1 = require("./styles");
 var ClusteredMarkers_1 = require("./components/ClusteredMarkers");
 var Polygon_1 = require("./components/Polygon");
-var DrawingManager_1 = require("./components/DrawingManager");
+var PolygonDrawing_1 = require("./components/PolygonDrawing");
+var styles_1 = require("./styles");
 var ON_MAP_MOVE_DEBOUNCE_INTERVAL = 1000;
-var libraries = ['drawing'];
+var libraries = ['marker'];
 var ReltioMap = function (_a) {
     var mapKey = _a.mapKey, restProps = __rest(_a, ["mapKey"]);
     return (react_1.default.createElement(react_google_maps_1.APIProvider, { apiKey: mapKey, libraries: libraries },
@@ -69,7 +69,7 @@ exports.ReltioMap = ReltioMap;
 var emptyObject = {};
 var emptyArray = [];
 var InternalReltioMap = (0, react_1.memo)(function (_a) {
-    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;
+    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;
     var styles = (0, styles_1.useStyles)();
     var mapMoveEndTimer = (0, react_1.useRef)(null);
     var isLoaded = (0, react_google_maps_1.useApiIsLoaded)();
@@ -79,10 +79,15 @@ var InternalReltioMap = (0, react_1.memo)(function (_a) {
     (0, useFitMapBounds_1.useFitMapBounds)({ markers: markers, activeOverlay: activeOverlay, map: map, isSearchOnMapMove: isSearchOnMapMove });
     var allOverlayOptions = (0, react_1.useMemo)(function () { return (__assign(__assign({}, constants_1.DEFAULT_OVERLAY_OPTIONS), overlayOptions)); }, [overlayOptions]);
     var googleMapOptions = (0, react_1.useMemo)(function () { return (__assign(__assign({}, constants_1.DEFAULT_GOOGLE_MAP_OPTIONS), mapOptions)); }, [mapOptions]);
-    var drawingManagerOptions = (0, react_1.useMemo)(function () { return ({
-        drawingControl: false,
-        polygonOptions: allOverlayOptions
-    }); }, [allOverlayOptions]);
+    var previewPolylineOptions = (0, react_1.useMemo)(function () {
+        var _a;
+        return ({
+            strokeColor: allOverlayOptions.strokeColor,
+            strokeWeight: allOverlayOptions.strokeWeight,
+            zIndex: ((_a = allOverlayOptions.zIndex) !== null && _a !== void 0 ? _a : 1) + 1
+        });
+    }, [allOverlayOptions]);
+    var completedPolygonDrawingOptions = (0, react_1.useMemo)(function () { return (__assign(__assign({}, allOverlayOptions), { editable: false })); }, [allOverlayOptions]);
     var polygonOptions = (0, react_1.useMemo)(function () { return (__assign({ paths: activeOverlay === null || activeOverlay === void 0 ? void 0 : activeOverlay.path, editable: true }, allOverlayOptions)); }, [activeOverlay, allOverlayOptions]);
     var handleChangeIsSearchOnMapMove = (0, react_1.useCallback)(function (isSearchOnMapMove) {
         onMapBoundsChanged(isSearchOnMapMove ? (0, helpers_1.getMapBoundsPolygon)(map) : null);
@@ -104,54 +109,41 @@ var InternalReltioMap = (0, react_1.memo)(function (_a) {
         mapMoveEndTimer.current = setTimeout(handleMapMoveEnd, ON_MAP_MOVE_DEBOUNCE_INTERVAL);
     }, [handleMapMoveEnd, isSearchOnMapMove]);
     var handleOverlayChange = (0, react_1.useCallback)(function (_e, propOverlay) {
-        var _a;
-        var _b;
-        var polygonStateOverlay = polygon && { type: constants_1.MAP_DRAWING_MODES.POLYGON, overlay: polygon };
+        var polygonStateOverlay = polygon && { type: constants_1.POLYGON_DRAWING_MODE, overlay: polygon };
         var stateOverlay = propOverlay || polygonStateOverlay;
         if ((0, ramda_1.isEmpty)(stateOverlay))
             return;
         var overlay = stateOverlay.overlay, type = stateOverlay.type;
-        var getPolygonLatLngCoordinates = function () {
-            return overlay
-                .getPath()
-                .getArray()
-                .map(function (latlng) { return [latlng.lat(), latlng.lng()]; });
-        };
-        var getCircleParameters = function () { return ({
-            radius: overlay.getRadius() / 1000,
-            center: overlay.getCenter()
-        }); };
-        var typeActions = (_a = {},
-            _a[constants_1.MAP_DRAWING_MODES.POLYGON] = getPolygonLatLngCoordinates,
-            _a[constants_1.MAP_DRAWING_MODES.CIRCLE] = getCircleParameters,
-            _a);
-        var data = (_b = typeActions[type]) === null || _b === void 0 ? void 0 : _b.call(typeActions);
-        if (!data)
-            return;
+        var data = overlay
+            .getPath()
+            .getArray()
+            .map(function (latlng) { return [latlng.lat(), latlng.lng()]; });
         onOverlayUpdated({ data: data, type: type });
     }, [onOverlayUpdated, polygon]);
-    var handleOverlayComplete = (0, react_1.useCallback)(function (type) { return function (overlay) {
-        handleOverlayChange(null, { type: type, overlay: overlay });
+    var onPolygonDrawingComplete = (0, react_1.useCallback)(function (overlay) {
+        handleOverlayChange(null, { type: constants_1.POLYGON_DRAWING_MODE, overlay: overlay });
         overlay.setMap(null);
         setDrawingMode(null);
-    }; }, [handleOverlayChange]);
+    }, [handleOverlayChange]);
     var handleClearOverlay = (0, react_1.useCallback)(function () {
         onOverlayUpdated(null);
     }, [onOverlayUpdated]);
     if (!isLoaded) {
         return loadingElement;
     }
-    var shouldRenderDrawingManager = isSearchEnabled && Boolean(drawingModes.length);
-    var shouldRenderRightMapControls = map && isSearchEnabled && Boolean(drawingModes.length);
+    var shouldRenderPolygonDrawing = isSearchEnabled && enablePolygonDrawing;
+    var shouldRenderRightMapControls = map && isSearchEnabled && enablePolygonDrawing;
     var shouldRenderCenterMapControls = map && isSearchEnabled;
-    var shouldRenderPolygon = !(0, helpers_1.getDrawingMode)(drawingMode) && activeOverlay && (0, ramda_1.propEq)('type', constants_1.MAP_DRAWING_MODES.POLYGON, activeOverlay);
+    var shouldRenderPolygon = !(0, helpers_1.isActivePolygonDrawing)(drawingMode) &&
+        activeOverlay &&
+        (0, ramda_1.propEq)('type', constants_1.POLYGON_DRAWING_MODE, activeOverlay);
     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 }),
         shouldRenderRightMapControls && (react_1.default.createElement(react_google_maps_1.MapControl, { position: react_google_maps_1.ControlPosition.TOP_RIGHT },
-            react_1.default.createElement(TopRightMapControls_1.TopRightMapControls, { className: styles.mapControlContainer, hasActiveOverlay: !!activeOverlay, drawingModes: drawingModes, drawingMode: drawingMode, onDrawingModeChanged: setDrawingMode, onClearOverlay: handleClearOverlay }))),
+            react_1.default.createElement(TopRightMapControls_1.TopRightMapControls, { className: styles.mapControlContainer, hasActiveOverlay: !!activeOverlay, enablePolygonDrawing: enablePolygonDrawing, drawingMode: drawingMode, onDrawingModeChanged: setDrawingMode, onClearOverlay: handleClearOverlay }))),
         shouldRenderCenterMapControls && (react_1.default.createElement(react_google_maps_1.MapControl, { position: react_google_maps_1.ControlPosition.TOP_CENTER },
             react_1.default.createElement(TopCenterMapControls_1.TopCenterMapControls, { className: styles.mapControlContainer, onChangeIsSearchOnMapMove: handleChangeIsSearchOnMapMove, isSearchOnMapMove: isSearchOnMapMove }))),
-        react_1.default.createElement(ClusteredMarkers_1.ClusteredMarkers, { entityMarkers: markers, enabledClustering: markerClusterer, options: markerClustererOptions, onMarkerClick: onMarkerClicked }),
+        react_1.default.createElement(ClusteredMarkers_1.ClusteredMarkers, { entityMarkers: markers, enabledClustering: markerClusterer, options: markerClustererOptions, onMarkerClick: onMarkerClicked, disabled: (0, helpers_1.isActivePolygonDrawing)(drawingMode) }),
         shouldRenderPolygon && (react_1.default.createElement(Polygon_1.Polygon, { onInit: setPolygon, options: polygonOptions, onMouseUp: handleOverlayChange, onDragEnd: handleOverlayChange })),
-        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 }))));
+        shouldRenderPolygonDrawing && (react_1.default.createElement(PolygonDrawing_1.PolygonDrawing, { isActive: (0, helpers_1.isActivePolygonDrawing)(drawingMode), previewPolylineOptions: previewPolylineOptions, completedPolygonOptions: completedPolygonDrawingOptions, onPolygonComplete: onPolygonDrawingComplete }))));
 });
 InternalReltioMap.displayName = 'InternalReltioMap';