@reltio/components 1.4.2257 → 1.4.2259

package/ReltioMap/components/ClusteredMarkers/ClusteredMarkers.d.ts

@@ -6,6 +6,7 @@ type Props = {
     enabledClustering: boolean;
     options?: ClusteredMarkersOptions;
     onMarkerClick?: (marker: GeoPoint) => void;
+    disabled?: boolean;
 };
-export declare const ClusteredMarkers: React.MemoExoticComponent<({ entityMarkers, options, enabledClustering, onMarkerClick }: Props) => React.JSX.Element>;
+export declare const ClusteredMarkers: React.MemoExoticComponent<({ entityMarkers, options, enabledClustering, onMarkerClick, disabled }: Props) => React.JSX.Element>;
 export {};

package/ReltioMap/components/ClusteredMarkers/ClusteredMarkers.js

@@ -16,28 +16,26 @@ import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { EntityMarker } from '../EntityMarker';
 import { CustomClusterRenderer } from './CustomClusterRenderer';
 export var ClusteredMarkers = memo(function (_a) {
-    var entityMarkers = _a.entityMarkers, options = _a.options, enabledClustering = _a.enabledClustering, onMarkerClick = _a.onMarkerClick;
+    var entityMarkers = _a.entityMarkers, options = _a.options, enabledClustering = _a.enabledClustering, onMarkerClick = _a.onMarkerClick, disabled = _a.disabled;
     var _b = useState({}), markers = _b[0], setMarkers = _b[1];
     var map = useMap();
     var clusterer = useMemo(function () {
         if (!enabledClustering || !map)
             return null;
-        return new MarkerClusterer({
-            map: map,
-            renderer: new CustomClusterRenderer(options),
-            algorithmOptions: { maxZoom: options === null || options === void 0 ? void 0 : options.maxZoom }
-        });
-    }, [map, options, enabledClustering]);
-    useEffect(function () {
-        return function () {
-            clusterer === null || clusterer === void 0 ? void 0 : clusterer.onRemove();
-        };
-    }, [entityMarkers]);
+        return new MarkerClusterer(__assign({ map: map, renderer: new CustomClusterRenderer(options), algorithmOptions: { maxZoom: options === null || options === void 0 ? void 0 : options.maxZoom } }, (disabled
+            ? {
+                onClusterClick: null
+            }
+            : {})));
+    }, [map, options, enabledClustering, disabled]);
     useEffect(function () {
         if (!clusterer)
             return;
         clusterer.clearMarkers();
         clusterer.addMarkers(Object.values(markers));
+        return function () {
+            clusterer.onRemove();
+        };
     }, [clusterer, markers]);
     var setMarkerRef = useCallback(function (marker, key) {
         setMarkers(function (markers) {
@@ -53,6 +51,6 @@ export var ClusteredMarkers = memo(function (_a) {
             }
         });
     }, []);
-    return (React.createElement(React.Fragment, null, entityMarkers.filter(prop('point')).map(function (marker) { return (React.createElement(EntityMarker, { key: marker.id, marker: marker, clusterer: enabledClustering ? setMarkerRef : undefined, onClick: onMarkerClick })); })));
+    return (React.createElement(React.Fragment, null, entityMarkers.filter(prop('point')).map(function (marker) { return (React.createElement(EntityMarker, { key: marker.id, marker: marker, clusterer: enabledClustering ? setMarkerRef : undefined, onClick: onMarkerClick, disabled: disabled })); })));
 });
 ClusteredMarkers.displayName = 'ClusteredMarkers';

package/ReltioMap/components/EntityMarker/EntityMarker.d.ts

@@ -5,6 +5,7 @@ type Props = {
     marker: GeoPoint;
     onClick: (marker: GeoPoint) => void;
     clusterer?: (advancedMarker: google.maps.marker.AdvancedMarkerElement | null, id: string) => void;
+    disabled?: boolean;
 } & Omit<ComponentProps<typeof AdvancedMarker>, 'onClick' | 'position' | 'onMouseEnter' | 'onMouseLeave'>;
-declare const _default: React.MemoExoticComponent<({ marker, onClick, clusterer, ...otherProps }: Props) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ marker, onClick, clusterer, disabled, ...otherProps }: Props) => React.JSX.Element>;
 export default _default;

package/ReltioMap/components/EntityMarker/EntityMarker.js

@@ -37,7 +37,7 @@ var hoveredMarkerIcon = svg2Url(HOVERED_MARKER);
 var markerIcon = svg2Url(MARKER);
 var EntityMarker = function (_a) {
     var _b;
-    var marker = _a.marker, onClick = _a.onClick, clusterer = _a.clusterer, otherProps = __rest(_a, ["marker", "onClick", "clusterer"]);
+    var marker = _a.marker, onClick = _a.onClick, clusterer = _a.clusterer, disabled = _a.disabled, otherProps = __rest(_a, ["marker", "onClick", "clusterer", "disabled"]);
     var styles = useStyles();
     var _c = useState(false), hovered = _c[0], setHovered = _c[1];
     var activeEntityUri = useContext(EntityMarkerContext).activeEntityUri;
@@ -54,7 +54,7 @@ var EntityMarker = function (_a) {
     }, [clusterer, marker.id]);
     var anchorEl = (_b = advancedMarkerRef.current) === null || _b === void 0 ? void 0 : _b.element;
     return (React.createElement(React.Fragment, null,
-        anchorEl && (React.createElement(Popper, { anchorEl: anchorEl, open: hovered, className: styles.popper, modal: false, placement: "top", modifiers: [
+        anchorEl && !disabled && (React.createElement(Popper, { anchorEl: anchorEl, open: hovered, className: styles.popper, modal: false, placement: "top", modifiers: [
                 {
                     name: 'offset',
                     options: {
@@ -63,7 +63,7 @@ var EntityMarker = function (_a) {
                 }
             ] },
             React.createElement(ProfileCard, { entity: marker.entity, onMouseOver: onMouseOver, onMouseOut: onMouseOut }))),
-        React.createElement(AdvancedMarker, __assign({ ref: ref, position: position, onClick: handleClick, onMouseEnter: onMouseOver, onMouseLeave: onMouseOut }, otherProps),
+        React.createElement(AdvancedMarker, __assign({ ref: ref, position: position, onClick: disabled ? undefined : handleClick, onMouseEnter: disabled ? undefined : onMouseOver, onMouseLeave: disabled ? undefined : onMouseOut }, otherProps),
             React.createElement("img", { "data-reltio-id": "marker-icon", src: hovered || isActive ? hoveredMarkerIcon : markerIcon }))));
 };
 export default memo(EntityMarker);

package/ReltioMap/components/PolygonDrawing/PolygonDrawing.d.ts

@@ -0,0 +1,4 @@
+import { UsePolygonDrawingParams } from './usePolygonDrawing';
+type PolygonDrawingProps = Omit<UsePolygonDrawingParams, 'map'>;
+export declare const PolygonDrawing: (props: PolygonDrawingProps) => any;
+export {};

package/ReltioMap/components/PolygonDrawing/PolygonDrawing.js

@@ -0,0 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { useMap } from '@vis.gl/react-google-maps';
+import { usePolygonDrawing } from './usePolygonDrawing';
+export var PolygonDrawing = function (props) {
+    var map = useMap();
+    usePolygonDrawing(__assign(__assign({}, props), { map: map }));
+    return null;
+};

package/ReltioMap/components/PolygonDrawing/crosshair.inline.svg.d.ts

@@ -0,0 +1 @@
+export declare const CROSSHAIR = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" shape-rendering=\"crispEdges\">\n  <g fill=\"#FFFFFF\">\n    <rect x=\"6\" y=\"0\" width=\"3\" height=\"1\"/>\n    <rect x=\"6\" y=\"1\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"1\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"2\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"2\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"3\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"3\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"4\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"4\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"5\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"5\" width=\"1\" height=\"1\"/>\n    <rect x=\"0\" y=\"6\" width=\"7\" height=\"1\"/>\n    <rect x=\"8\" y=\"6\" width=\"7\" height=\"1\"/>\n    <rect x=\"0\" y=\"7\" width=\"1\" height=\"1\"/>\n    <rect x=\"14\" y=\"7\" width=\"1\" height=\"1\"/>\n    <rect x=\"0\" y=\"8\" width=\"7\" height=\"1\"/>\n    <rect x=\"8\" y=\"8\" width=\"7\" height=\"1\"/>\n    <rect x=\"6\" y=\"9\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"9\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"10\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"10\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"11\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"11\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"12\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"12\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"13\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"13\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"14\" width=\"3\" height=\"1\"/>\n  </g>\n  <g fill=\"#000000\">\n    <rect x=\"7\" y=\"1\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"2\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"3\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"4\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"5\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"6\" width=\"1\" height=\"1\"/>\n    <rect x=\"1\" y=\"7\" width=\"13\" height=\"1\"/>\n    <rect x=\"7\" y=\"8\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"9\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"10\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"11\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"12\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"13\" width=\"1\" height=\"1\"/>\n  </g>\n</svg>";

package/ReltioMap/components/PolygonDrawing/crosshair.inline.svg.js

@@ -0,0 +1 @@
+export var CROSSHAIR = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" shape-rendering=\"crispEdges\">\n  <g fill=\"#FFFFFF\">\n    <rect x=\"6\" y=\"0\" width=\"3\" height=\"1\"/>\n    <rect x=\"6\" y=\"1\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"1\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"2\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"2\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"3\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"3\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"4\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"4\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"5\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"5\" width=\"1\" height=\"1\"/>\n    <rect x=\"0\" y=\"6\" width=\"7\" height=\"1\"/>\n    <rect x=\"8\" y=\"6\" width=\"7\" height=\"1\"/>\n    <rect x=\"0\" y=\"7\" width=\"1\" height=\"1\"/>\n    <rect x=\"14\" y=\"7\" width=\"1\" height=\"1\"/>\n    <rect x=\"0\" y=\"8\" width=\"7\" height=\"1\"/>\n    <rect x=\"8\" y=\"8\" width=\"7\" height=\"1\"/>\n    <rect x=\"6\" y=\"9\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"9\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"10\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"10\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"11\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"11\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"12\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"12\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"13\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"13\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"14\" width=\"3\" height=\"1\"/>\n  </g>\n  <g fill=\"#000000\">\n    <rect x=\"7\" y=\"1\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"2\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"3\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"4\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"5\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"6\" width=\"1\" height=\"1\"/>\n    <rect x=\"1\" y=\"7\" width=\"13\" height=\"1\"/>\n    <rect x=\"7\" y=\"8\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"9\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"10\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"11\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"12\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"13\" width=\"1\" height=\"1\"/>\n  </g>\n</svg>";

package/ReltioMap/components/PolygonDrawing/index.d.ts

@@ -0,0 +1,2 @@
+export { PolygonDrawing } from './PolygonDrawing';
+export { usePolygonDrawing } from './usePolygonDrawing';

package/ReltioMap/components/PolygonDrawing/index.js

@@ -0,0 +1,2 @@
+export { PolygonDrawing } from './PolygonDrawing';
+export { usePolygonDrawing } from './usePolygonDrawing';

package/ReltioMap/components/PolygonDrawing/polygonRingHelpers.d.ts

@@ -0,0 +1,5 @@
+export declare const buildPolygonFromVertices: (vertices: readonly google.maps.LatLng[], options: google.maps.PolygonOptions) => google.maps.Polygon;
+export declare const serializeRing: (vertices: readonly google.maps.LatLng[]) => [number, number][];
+export declare const validateRing: (vertices: readonly google.maps.LatLng[] | null | undefined) => boolean;
+/** Drops the last vertex when it duplicates the previous (e.g. double-click emits an extra click at the same lat/lng). */
+export declare const dedupeTrailingDuplicateVertex: (vertices: readonly google.maps.LatLng[]) => google.maps.LatLng[];

package/ReltioMap/components/PolygonDrawing/polygonRingHelpers.js

@@ -0,0 +1,43 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+export var buildPolygonFromVertices = function (vertices, options) {
+    return new google.maps.Polygon(__assign({ paths: __spreadArray([], vertices, true), map: null }, options));
+};
+export var serializeRing = function (vertices) {
+    return vertices.map(function (v) { return [v.lat(), v.lng()]; });
+};
+export var validateRing = function (vertices) {
+    var _a;
+    return ((_a = vertices === null || vertices === void 0 ? void 0 : vertices.length) !== null && _a !== void 0 ? _a : 0) >= 3;
+};
+/** Drops the last vertex when it duplicates the previous (e.g. double-click emits an extra click at the same lat/lng). */
+export var dedupeTrailingDuplicateVertex = function (vertices) {
+    var out = __spreadArray([], vertices, true);
+    if (out.length < 2) {
+        return out;
+    }
+    var last = out[out.length - 1];
+    var prev = out[out.length - 2];
+    if (last && prev && last.equals(prev)) {
+        out.pop();
+    }
+    return out;
+};

package/ReltioMap/components/PolygonDrawing/useDrawingCursors.d.ts

@@ -0,0 +1,6 @@
+export declare const MAP_DRAWING_CROSSHAIR_CURSOR: string;
+type DrawingCursors = {
+    reapplyCursors: () => void;
+};
+export declare const useDrawingCursors: (map: google.maps.Map | null, isActive: boolean) => DrawingCursors;
+export {};

package/ReltioMap/components/PolygonDrawing/useDrawingCursors.js

@@ -0,0 +1,87 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { svg2CursorUrl } from '@reltio/mdm-sdk';
+import { CROSSHAIR } from './crosshair.inline.svg';
+import { isDomElement } from '../../helpers';
+var crosshairCursorDataUrl = svg2CursorUrl(CROSSHAIR);
+export var MAP_DRAWING_CROSSHAIR_CURSOR = "url(\"".concat(crosshairCursorDataUrl, "\") 7 7, crosshair");
+export var useDrawingCursors = function (map, isActive) {
+    var applyDrawingCursorsIfChangedRef = useRef(function () { });
+    var reapplyCursors = useCallback(function () {
+        applyDrawingCursorsIfChangedRef.current();
+    }, []);
+    useEffect(function () {
+        if (!map || !isActive) {
+            return undefined;
+        }
+        var mapDiv = map.getDiv();
+        var isMapDragging = false;
+        var lastCursor = '';
+        var moRaf = null;
+        var getCurrentCursor = function () { return (isMapDragging ? 'grabbing' : MAP_DRAWING_CROSSHAIR_CURSOR); };
+        var applyInlineCursorOnAdvancedMarkers = function (cursor) {
+            if (!isDomElement(mapDiv)) {
+                return;
+            }
+            mapDiv.querySelectorAll('gmp-advanced-marker').forEach(function (el) {
+                if (el instanceof HTMLElement) {
+                    el.style.setProperty('cursor', cursor, 'important');
+                }
+            });
+        };
+        var apply = function () {
+            var cursor = getCurrentCursor();
+            if (isDomElement(mapDiv)) {
+                if (lastCursor !== cursor) {
+                    lastCursor = cursor;
+                    mapDiv.style.setProperty('cursor', cursor, 'important');
+                }
+                applyInlineCursorOnAdvancedMarkers(cursor);
+            }
+        };
+        var applyAfterDomMutations = function () {
+            if (!isDomElement(mapDiv) || moRaf !== null) {
+                return;
+            }
+            moRaf = requestAnimationFrame(function () {
+                moRaf = null;
+                applyInlineCursorOnAdvancedMarkers(getCurrentCursor());
+            });
+        };
+        var mapDomObserver = isDomElement(mapDiv) ? new MutationObserver(applyAfterDomMutations) : null;
+        if (mapDomObserver) {
+            mapDomObserver.observe(mapDiv, { childList: true, subtree: true });
+        }
+        var reapplyCursorsToDom = function () {
+            lastCursor = '';
+            apply();
+        };
+        applyDrawingCursorsIfChangedRef.current = reapplyCursorsToDom;
+        var dragStartListener = map.addListener('dragstart', function () {
+            isMapDragging = true;
+            apply();
+        });
+        var dragEndListener = map.addListener('dragend', function () {
+            isMapDragging = false;
+            apply();
+        });
+        apply();
+        return function () {
+            applyDrawingCursorsIfChangedRef.current = function () { };
+            if (moRaf !== null) {
+                cancelAnimationFrame(moRaf);
+            }
+            mapDomObserver === null || mapDomObserver === void 0 ? void 0 : mapDomObserver.disconnect();
+            if (isDomElement(mapDiv)) {
+                mapDiv.querySelectorAll('gmp-advanced-marker').forEach(function (el) {
+                    if (el instanceof HTMLElement) {
+                        el.style.removeProperty('cursor');
+                    }
+                });
+                mapDiv.style.removeProperty('cursor');
+            }
+            google.maps.event.removeListener(dragStartListener);
+            google.maps.event.removeListener(dragEndListener);
+        };
+    }, [map, isActive]);
+    return { reapplyCursors: reapplyCursors };
+};

package/ReltioMap/components/PolygonDrawing/usePolygonDrawing.d.ts

@@ -0,0 +1,9 @@
+export { MAP_DRAWING_CROSSHAIR_CURSOR } from './useDrawingCursors';
+export type UsePolygonDrawingParams = {
+    map: google.maps.Map | null;
+    isActive: boolean;
+    previewPolylineOptions: google.maps.PolylineOptions;
+    completedPolygonOptions: google.maps.PolygonOptions;
+    onPolygonComplete: (polygon: google.maps.Polygon) => void;
+};
+export declare const usePolygonDrawing: ({ map, isActive, previewPolylineOptions, completedPolygonOptions, onPolygonComplete }: UsePolygonDrawingParams) => void;

package/ReltioMap/components/PolygonDrawing/usePolygonDrawing.js

@@ -0,0 +1,197 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { isDomElement } from '../../helpers';
+import { buildPolygonFromVertices, dedupeTrailingDuplicateVertex, validateRing } from './polygonRingHelpers';
+import { MAP_DRAWING_CROSSHAIR_CURSOR, useDrawingCursors } from './useDrawingCursors';
+import { usePreviewPolylines } from './usePreviewPolylines';
+import { useVertexHandles } from './useVertexHandles';
+export { MAP_DRAWING_CROSSHAIR_CURSOR } from './useDrawingCursors';
+export var usePolygonDrawing = function (_a) {
+    var map = _a.map, isActive = _a.isActive, previewPolylineOptions = _a.previewPolylineOptions, completedPolygonOptions = _a.completedPolygonOptions, onPolygonComplete = _a.onPolygonComplete;
+    var _b = useState([]), vertices = _b[0], setVertices = _b[1];
+    var verticesRef = useRef([]);
+    var completionLockRef = useRef(false);
+    var previewPolylineOptionsRef = useRef(previewPolylineOptions);
+    previewPolylineOptionsRef.current = previewPolylineOptions;
+    verticesRef.current = vertices;
+    var prevDisableDoubleClickZoom = useRef(undefined);
+    var prevClickableIcons = useRef(undefined);
+    var prevDraggableCursor = useRef(undefined);
+    var syncDisposeVertexHandlesRef = useRef(function () { });
+    useEffect(function () {
+        if (map && isActive) {
+            setVertices([]);
+            completionLockRef.current = false;
+        }
+        else if (!isActive) {
+            setVertices([]);
+        }
+    }, [map, isActive]);
+    var reapplyCursors = useDrawingCursors(map, isActive).reapplyCursors;
+    var _c = usePreviewPolylines(map, previewPolylineOptionsRef, isActive), polylineRef = _c.polylineRef, rubberBandPolylineRef = _c.rubberBandPolylineRef, handleZIndexRef = _c.handleZIndexRef;
+    var reapplyCursorsRef = useRef(reapplyCursors);
+    reapplyCursorsRef.current = reapplyCursors;
+    var onPolygonCompleteRef = useRef(onPolygonComplete);
+    onPolygonCompleteRef.current = onPolygonComplete;
+    var completedPolygonOptionsRef = useRef(completedPolygonOptions);
+    completedPolygonOptionsRef.current = completedPolygonOptions;
+    var tryComplete = useCallback(function () {
+        var _a, _b;
+        if (completionLockRef.current) {
+            return;
+        }
+        var verts = dedupeTrailingDuplicateVertex(verticesRef.current);
+        if (!validateRing(verts)) {
+            return;
+        }
+        completionLockRef.current = true;
+        syncDisposeVertexHandlesRef.current();
+        (_a = rubberBandPolylineRef.current) === null || _a === void 0 ? void 0 : _a.setPath([]);
+        var polygon = buildPolygonFromVertices(verts, completedPolygonOptionsRef.current);
+        (_b = polylineRef.current) === null || _b === void 0 ? void 0 : _b.setPath([]);
+        setVertices([]);
+        reapplyCursorsRef.current();
+        onPolygonCompleteRef.current(polygon);
+    }, [polylineRef, rubberBandPolylineRef]);
+    var resetDraftPolygon = useCallback(function () {
+        var _a, _b;
+        if (verticesRef.current.length === 0) {
+            return;
+        }
+        setVertices([]);
+        (_a = polylineRef.current) === null || _a === void 0 ? void 0 : _a.setPath([]);
+        (_b = rubberBandPolylineRef.current) === null || _b === void 0 ? void 0 : _b.setPath([]);
+        reapplyCursorsRef.current();
+    }, [polylineRef, rubberBandPolylineRef]);
+    var tryCompleteRef = useRef(tryComplete);
+    tryCompleteRef.current = tryComplete;
+    var resetDraftPolygonRef = useRef(resetDraftPolygon);
+    resetDraftPolygonRef.current = resetDraftPolygon;
+    var previewPathVertexCountRef = useRef(0);
+    useVertexHandles({
+        map: map,
+        isActive: isActive,
+        vertices: vertices,
+        handleZIndexRef: handleZIndexRef,
+        onFirstHandleClick: tryComplete,
+        syncDisposeRef: syncDisposeVertexHandlesRef
+    });
+    useEffect(function () {
+        if (!isActive) {
+            previewPathVertexCountRef.current = 0;
+            return;
+        }
+        var line = polylineRef.current;
+        var band = rubberBandPolylineRef.current;
+        if (!line) {
+            return;
+        }
+        var path = line.getPath();
+        var prev = previewPathVertexCountRef.current;
+        var vertexCount = vertices.length;
+        if (vertexCount === 0) {
+            if (path.getLength() > 0) {
+                path.clear();
+            }
+            band === null || band === void 0 ? void 0 : band.setPath([]);
+            previewPathVertexCountRef.current = 0;
+            return;
+        }
+        var pathLen = path.getLength();
+        if (vertexCount < prev) {
+            line.setPath(vertices);
+        }
+        else if (vertexCount === prev + 1 && pathLen === prev) {
+            var added = vertices[vertexCount - 1];
+            if (added) {
+                path.push(added);
+            }
+        }
+        else if (vertexCount !== prev || pathLen !== vertexCount) {
+            line.setPath(vertices);
+        }
+        previewPathVertexCountRef.current = vertexCount;
+        var last = vertices[vertexCount - 1];
+        if (last) {
+            band === null || band === void 0 ? void 0 : band.setPath([last, last]);
+        }
+    }, [isActive, vertices, polylineRef, rubberBandPolylineRef]);
+    useEffect(function () {
+        if (!map || !isActive) {
+            return undefined;
+        }
+        prevDisableDoubleClickZoom.current = map.get('disableDoubleClickZoom');
+        prevClickableIcons.current = map.get('clickableIcons');
+        prevDraggableCursor.current = map.get('draggableCursor');
+        var mapDiv = map.getDiv();
+        var rubber = rubberBandPolylineRef;
+        var updateRubberBand = function (latLngFromEvent) {
+            var _a, _b, _c;
+            var verts = verticesRef.current;
+            if (!verts.length || !latLngFromEvent) {
+                (_a = rubber.current) === null || _a === void 0 ? void 0 : _a.setPath([]);
+                return;
+            }
+            var last = verts[verts.length - 1];
+            if (!last) {
+                (_b = rubber.current) === null || _b === void 0 ? void 0 : _b.setPath([]);
+                return;
+            }
+            (_c = rubber.current) === null || _c === void 0 ? void 0 : _c.setPath([last, latLngFromEvent]);
+        };
+        map.setOptions({
+            disableDoubleClickZoom: true,
+            clickableIcons: false,
+            draggableCursor: MAP_DRAWING_CROSSHAIR_CURSOR
+        });
+        var mouseMoveListener = map.addListener('mousemove', function (e) {
+            var _a;
+            updateRubberBand((_a = e.latLng) !== null && _a !== void 0 ? _a : null);
+        });
+        var onDrawingClick = function (e) {
+            var latLng = e.latLng;
+            if (!latLng) {
+                return;
+            }
+            if (completionLockRef.current) {
+                return;
+            }
+            setVertices(function (vs) { return __spreadArray(__spreadArray([], vs, true), [latLng], false); });
+        };
+        var clickListener = map.addListener('click', onDrawingClick);
+        var onMapDivDblClick = function (ev) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            tryCompleteRef.current();
+        };
+        var onMapDivMouseLeave = function () {
+            resetDraftPolygonRef.current();
+        };
+        if (isDomElement(mapDiv)) {
+            mapDiv.addEventListener('dblclick', onMapDivDblClick, true);
+            mapDiv.addEventListener('mouseleave', onMapDivMouseLeave);
+        }
+        return function () {
+            var _a;
+            if (isDomElement(mapDiv)) {
+                mapDiv.removeEventListener('dblclick', onMapDivDblClick, true);
+                mapDiv.removeEventListener('mouseleave', onMapDivMouseLeave);
+            }
+            google.maps.event.removeListener(mouseMoveListener);
+            google.maps.event.removeListener(clickListener);
+            map.setOptions({
+                disableDoubleClickZoom: (_a = prevDisableDoubleClickZoom.current) !== null && _a !== void 0 ? _a : false,
+                clickableIcons: prevClickableIcons.current !== undefined ? prevClickableIcons.current : true,
+                draggableCursor: prevDraggableCursor.current
+            });
+        };
+    }, [map, isActive]);
+};

package/ReltioMap/components/PolygonDrawing/usePreviewPolylines.d.ts

@@ -0,0 +1,7 @@
+import { type MutableRefObject, type RefObject } from 'react';
+export type PreviewPolylinesRefs = {
+    polylineRef: RefObject<google.maps.Polyline | null>;
+    rubberBandPolylineRef: RefObject<google.maps.Polyline | null>;
+    handleZIndexRef: RefObject<number>;
+};
+export declare const usePreviewPolylines: (map: google.maps.Map | null, previewPolylineOptionsRef: MutableRefObject<google.maps.PolylineOptions>, isActive: boolean) => PreviewPolylinesRefs;

package/ReltioMap/components/PolygonDrawing/usePreviewPolylines.js

@@ -0,0 +1,38 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { useEffect, useRef } from 'react';
+export var usePreviewPolylines = function (map, previewPolylineOptionsRef, isActive) {
+    var polylineRef = useRef(null);
+    var rubberBandPolylineRef = useRef(null);
+    var handleZIndexRef = useRef(4);
+    useEffect(function () {
+        var _a;
+        if (!map || !isActive) {
+            return undefined;
+        }
+        var options = previewPolylineOptionsRef.current;
+        var polyline = new google.maps.Polyline(__assign(__assign({ map: map, path: [] }, options), { clickable: false, draggable: false, editable: false }));
+        var previewBandZ = ((_a = options.zIndex) !== null && _a !== void 0 ? _a : 2) + 1;
+        var rubberBandPolyline = new google.maps.Polyline(__assign(__assign({ map: map, path: [] }, options), { clickable: false, draggable: false, editable: false, zIndex: previewBandZ, strokeOpacity: Math.min(1, typeof options.strokeOpacity === 'number' ? options.strokeOpacity * 0.65 : 0.65) }));
+        handleZIndexRef.current = previewBandZ + 2;
+        polylineRef.current = polyline;
+        rubberBandPolylineRef.current = rubberBandPolyline;
+        return function () {
+            polyline.setMap(null);
+            rubberBandPolyline.setMap(null);
+            polylineRef.current = null;
+            rubberBandPolylineRef.current = null;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [map, isActive]);
+    return { polylineRef: polylineRef, rubberBandPolylineRef: rubberBandPolylineRef, handleZIndexRef: handleZIndexRef };
+};

package/ReltioMap/components/PolygonDrawing/useVertexHandles.d.ts

@@ -0,0 +1,14 @@
+import { type MutableRefObject, type RefObject } from 'react';
+export type UseVertexHandlesParams = {
+    map: google.maps.Map | null;
+    isActive: boolean;
+    vertices: readonly google.maps.LatLng[];
+    handleZIndexRef: RefObject<number>;
+    onFirstHandleClick: () => void;
+    syncDisposeRef: MutableRefObject<() => void>;
+};
+/**
+ * N circular vertex markers. The first is clickable to close the ring; others swallow clicks to avoid
+ * double map-handling.
+ */
+export declare const useVertexHandles: ({ map, isActive, vertices, handleZIndexRef, onFirstHandleClick, syncDisposeRef }: UseVertexHandlesParams) => void;

package/ReltioMap/components/PolygonDrawing/useVertexHandles.js

@@ -0,0 +1,85 @@
+import { useEffect, useRef } from 'react';
+import { MAP_DRAWING_CROSSHAIR_CURSOR } from './useDrawingCursors';
+var createVertexHandleElement = function (isFirstHandle) {
+    var el = document.createElement('div');
+    el.style.width = '10px';
+    el.style.height = '10px';
+    el.style.borderRadius = '50%';
+    el.style.boxSizing = 'border-box';
+    el.style.backgroundColor = '#ffffff';
+    el.style.border = '1.25px solid #444444';
+    el.style.cursor = isFirstHandle ? 'pointer' : MAP_DRAWING_CROSSHAIR_CURSOR;
+    el.style.transform = 'translateY(50%)';
+    return el;
+};
+/**
+ * N circular vertex markers. The first is clickable to close the ring; others swallow clicks to avoid
+ * double map-handling.
+ */
+export var useVertexHandles = function (_a) {
+    var map = _a.map, isActive = _a.isActive, vertices = _a.vertices, handleZIndexRef = _a.handleZIndexRef, onFirstHandleClick = _a.onFirstHandleClick, syncDisposeRef = _a.syncDisposeRef;
+    var markersRef = useRef([]);
+    var onFirstHandleClickRef = useRef(onFirstHandleClick);
+    onFirstHandleClickRef.current = onFirstHandleClick;
+    var dispose = function () {
+        markersRef.current.forEach(function (m) {
+            google.maps.event.clearInstanceListeners(m);
+            m.map = null;
+        });
+        markersRef.current = [];
+    };
+    useEffect(function () {
+        if (!map || !isActive) {
+            syncDisposeRef.current = function () {
+                dispose();
+            };
+            dispose();
+            return function () {
+                syncDisposeRef.current = function () { };
+            };
+        }
+        syncDisposeRef.current = dispose;
+        return function () {
+            syncDisposeRef.current = function () { };
+            dispose();
+        };
+    }, [map, isActive, syncDisposeRef]);
+    useEffect(function () {
+        if (!map || !isActive || typeof document === 'undefined') {
+            return;
+        }
+        if (vertices.length === 0) {
+            dispose();
+            return;
+        }
+        var handleZ = handleZIndexRef.current;
+        var AdvancedMarkerElement = google.maps.marker.AdvancedMarkerElement;
+        for (var i = markersRef.current.length; i < vertices.length; i += 1) {
+            var latLng = vertices[i];
+            if (!latLng) {
+                continue;
+            }
+            var isFirstHandle = i === 0;
+            var content = createVertexHandleElement(isFirstHandle);
+            var marker = new AdvancedMarkerElement({
+                map: map,
+                position: latLng,
+                content: content,
+                zIndex: handleZ + (isFirstHandle ? 1 : 0),
+                gmpClickable: true
+            });
+            if (isFirstHandle) {
+                google.maps.event.addListener(marker, 'click', function (e) {
+                    e.stop();
+                    onFirstHandleClickRef.current();
+                });
+            }
+            else {
+                google.maps.event.addListener(marker, 'click', function (e) {
+                    e.stop();
+                });
+            }
+            markersRef.current.push(marker);
+        }
+    }, [map, isActive, vertices, handleZIndexRef]);
+};