@theseam/ui-common 2.0.1-beta.99 → 2.1.0

package/fesm2022/theseam-ui-common-google-maps.mjs

@@ -1,18 +1,19 @@
 import { __decorate } from 'tslib';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Injector, HostListener, Input, Optional, Inject, ChangeDetectionStrategy, Component, inject, ChangeDetectorRef, EventEmitter, forwardRef, ViewChild, Output, HostBinding, Directive, NgModule, LOCALE_ID } from '@angular/core';
+import { InjectionToken, Injectable, Injector, inject, ChangeDetectionStrategy, Component, HostListener, Input, Optional, Inject, ChangeDetectorRef, EventEmitter, forwardRef, ViewChild, Output, HostBinding, Directive, NgModule, LOCALE_ID } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Observable, Subject, fromEvent, BehaviorSubject, from, of, interval, defer, throwError } from 'rxjs';
 import { takeUntil, switchMap, tap, map, catchError, startWith, filter, take, mapTo } from 'rxjs/operators';
-import { faFileImport, faCrosshairs, faSearchLocation } from '@fortawesome/free-solid-svg-icons';
+import { faDrawPolygon, faFileImport, faCrosshairs, faSearchLocation } from '@fortawesome/free-solid-svg-icons';
 import { mixinDisabled, InputBoolean, InputNumber } from '@theseam/ui-common/core';
 import * as i6 from '@theseam/ui-common/menu';
 import { MenuComponent, TheSeamMenuModule } from '@theseam/ui-common/menu';
-import { notNullOrUndefined, isNullOrUndefined, readGeoFile } from '@theseam/ui-common/utils';
+import { TerraDraw, TerraDrawPolyLineMode } from 'terra-draw';
+import { TerraDrawGoogleMapsAdapter } from 'terra-draw-google-maps-adapter';
+import { notNullOrUndefined, closePolygons, polygonHasMinDistinctVertices, addHoleToPolygon, polygonContains, readGeoFile } from '@theseam/ui-common/utils';
 import { ESCAPE } from '@angular/cdk/keycodes';
-import booleanContains from '@turf/boolean-contains';
-import { polygon, multiPolygon } from '@turf/helpers';
+import { toSignal } from '@angular/core/rxjs-interop';
 import * as i2 from '@theseam/ui-common/icon';
 import { TheSeamIconModule } from '@theseam/ui-common/icon';
 import * as i1 from '@angular/cdk/a11y';
@@ -71,64 +72,6 @@ function stripAppFeaturePropertiesFromJson(json) {
         }
     }
 }
-/**
- * Searches for a Feature in Data that contains the provided Feature and can use
- * it as a cutout area.
- */
-function getPossibleExteriorFeature(data, feature) {
-    let exteriorPolygonFeature;
-    data.forEach((f) => {
-        if (f === feature) {
-            return;
-        }
-        const geometry = f.getGeometry();
-        if (geometry === null) {
-            throw Error(`Geometry not found.`);
-        }
-        if (geometry.getType() === 'Polygon' && featureContains(f, feature)) {
-            exteriorPolygonFeature = f;
-        }
-    });
-    return exteriorPolygonFeature;
-}
-function addInnerFeatureCutoutToExteriorFeature(exteriorFeature, innerFeature) {
-    const exteriorGeometry = exteriorFeature.getGeometry();
-    if (exteriorGeometry === null) {
-        throw Error(`Geometry not found.`);
-    }
-    const innerGeometry = innerFeature.getGeometry();
-    if (innerGeometry === null) {
-        throw Error(`Geometry not found.`);
-    }
-    // NOTE: Other geometries may support cutouts, but our map shapes editor only
-    // supports polygons currently, so we will need to handle other geometry types
-    // here if we start allowing users to draw shapes other than polygon.
-    if (exteriorGeometry.getType() !== 'Polygon' ||
-        innerGeometry.getType() !== 'Polygon') {
-        throw Error(`Inner cutout is only supported by Polygon gemoetry.`);
-    }
-    const featurePolygon = innerGeometry;
-    const exteriorPolygon = exteriorGeometry;
-    exteriorFeature.setGeometry(new google.maps.Data.Polygon([
-        ...exteriorPolygon.getArray(),
-        featurePolygon.getAt(0).getArray().reverse(),
-    ]));
-}
-/**
- * Google maps paths don't always start and stop at the exact same position, so
- * this will fix that for turfjs.
- */
-function fixPathDifferentStartingAndEndingPoint(coordinates) {
-    if (coordinates.length <= 1) {
-        return;
-    }
-    const start = coordinates[0];
-    const end = coordinates[coordinates.length - 1];
-    if (start[0] === end[0] && start[1] === end[1]) {
-        return;
-    }
-    coordinates.push(coordinates[0]);
-}
 function polygonHasValidPathsLengths(polygon, minPointsInValidPath = 3) {
     const paths = polygon.getPaths().getArray();
     for (const path of paths) {
@@ -139,47 +82,50 @@ function polygonHasValidPathsLengths(polygon, minPointsInValidPath = 3) {
     return true;
 }
 function polygonCoordinates(polygon) {
-    return polygon.getArray().map((linRing) => {
-        const coords = linRing.getArray().map((x) => [x.lng(), x.lat()]);
-        fixPathDifferentStartingAndEndingPoint(coords);
-        return coords;
-    });
-}
-function multiPolygonCoordinates(multiPolygon) {
-    return multiPolygon.getArray().map((x) => polygonCoordinates(x));
+    const polygonGeoJson = {
+        type: 'Polygon',
+        coordinates: polygon
+            .getArray()
+            .map((linRing) => linRing.getArray().map((x) => [x.lng(), x.lat()])),
+    };
+    closePolygons(polygonGeoJson);
+    return polygonGeoJson.coordinates;
 }
-function toTurfJsPolygon(polygon$1) {
-    return polygon(polygonCoordinates(polygon$1));
+/** Build a google.maps.Data.Polygon from a GeoJSON Polygon (lng/lat order). */
+function dataPolygonFromGeoJson(polygon) {
+    const rings = polygon.coordinates.map((ring) => 
+    // GeoJSON rings are explicitly closed (first coordinate repeated at the
+    // end), but google.maps.Data.Polygon paths are implicitly closed and must
+    // NOT include the repeated point — otherwise it becomes a duplicate vertex
+    // coincident with the first (two points that edit independently, and a
+    // double closing point when serialized back to GeoJSON).
+    openRing(ring).map(([lng, lat]) => ({ lat, lng })));
+    return new google.maps.Data.Polygon(rings);
 }
-function toTurfJsMultiPolygon(multiPolygon$1) {
-    return multiPolygon(multiPolygonCoordinates(multiPolygon$1));
+/** Drop a ring's explicit closing point (a trailing copy of the first). */
+function openRing(ring) {
+    if (ring.length < 2) {
+        return ring;
+    }
+    const first = ring[0];
+    const last = ring[ring.length - 1];
+    return first[0] === last[0] && first[1] === last[1] ? ring.slice(0, -1) : ring;
 }
-function toTurfJsFeature(googleFeature) {
-    const geometry = googleFeature.getGeometry();
-    if (geometry === null) {
-        throw Error(`Geometry not found.`);
-    }
-    if (geometry.getType() === 'Polygon') {
-        return toTurfJsPolygon(geometry);
-    }
-    else if (geometry.getType() === 'MultiPolygon') {
-        return toTurfJsMultiPolygon(geometry);
+/**
+ * Read an existing feature's Polygon geometry as a closed GeoJSON Polygon.
+ * Returns undefined for non-Polygon geometries. Does not mutate the feature.
+ */
+function geoJsonPolygonFromDataFeature(feature) {
+    const geometry = feature.getGeometry();
+    if (geometry === null || geometry.getType() !== 'Polygon') {
+        return undefined;
     }
-    throw Error(`Unexpected geometry.`);
-}
-function featureContains(featureA, featureB) {
-    const polygonA = toTurfJsFeature(featureA);
-    const polygonB = toTurfJsFeature(featureB);
-    return booleanContains(polygonA, polygonB);
-}
-function createDataFeatureFromPolygon(polygon) {
-    const arr = polygon
-        .getPaths()
-        .getArray()
-        .map((x) => x.getArray());
-    return new google.maps.Data.Feature({
-        geometry: new google.maps.Data.Polygon(arr),
-    });
+    const polygon = {
+        type: 'Polygon',
+        coordinates: polygonCoordinates(geometry),
+    };
+    closePolygons(polygon);
+    return polygon;
 }
 function getBoundsWithAllFeatures(data) {
     const bounds = new google.maps.LatLngBounds();
@@ -440,19 +386,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             type: Injectable
         }], ctorParameters: () => [] });
 
-const DEFAULT_POLYGON_OPTIONS = (editingEnabled) => ({
-    clickable: editingEnabled,
-    draggable: editingEnabled,
-    editable: editingEnabled,
-});
-const DEFAULT_DRAWING_MANAGER_OPTIONS = (editingEnabled) => ({
-    drawingControl: editingEnabled,
-    drawingControlOptions: {
-        drawingModes: [google.maps.drawing.OverlayType.POLYGON],
-    },
-    polygonOptions: DEFAULT_POLYGON_OPTIONS(editingEnabled),
-    drawingMode: null,
-});
 const FEATURE_STYLE_OPTIONS_DEFAULT = (editingEnabled) => ({
     clickable: true,
     // clickable: editingEnabled,
@@ -501,7 +434,10 @@ class GoogleMapsService {
     _ngUnsubscribe = new Subject();
     _mapReadySubject = new BehaviorSubject(false);
     _editingEnabledSubject = new BehaviorSubject(true);
-    _drawingManager;
+    _terraDraw;
+    _terraDrawReady = false;
+    _drawingSubject = new BehaviorSubject(false);
+    drawing$ = this._drawingSubject.asObservable();
     _featureContextMenu = null;
     _activeContextMenu = null;
     _baseLatLng;
@@ -523,13 +459,23 @@ class GoogleMapsService {
         this.mapReady$ = this._mapReadySubject.asObservable();
     }
     ngOnDestroy() {
+        if (this._terraDraw?.enabled) {
+            this._terraDraw.stop();
+        }
+        this._terraDraw = undefined;
+        this._drawingSubject.complete();
         this._ngUnsubscribe.next();
         this._ngUnsubscribe.complete();
     }
     setMap(map) {
         this.googleMap = map;
         this._mapReadySubject.next(true);
-        this._initDrawingManager();
+        // Terra Draw's Google Maps adapter binds its event listeners to the map's
+        // rendered '.gm-style' DOM subtree (located via querySelector). That subtree
+        // does not exist yet when 'mapInitialized' fires, so initializing Terra Draw
+        // synchronously here makes the adapter register listeners on a null element
+        // and throw. Defer init until the map has rendered (first 'idle').
+        google.maps.event.addListenerOnce(map, 'idle', () => this._initTerraDraw());
         this._initFeatureStyling();
         this._initFeatureChangeListeners();
     }
@@ -551,20 +497,12 @@ class GoogleMapsService {
             this.googleMap.data.revertStyle();
             if (!enabled) {
                 this.stopDrawing();
-                const options = DEFAULT_DRAWING_MANAGER_OPTIONS(this.isEditingEnabled());
-                this._drawingManager?.setOptions(options);
-                this._drawingManager?.setMap(null);
                 this.googleMap.data.forEach((f) => {
                     if (isFeatureSelected(f)) {
                         setFeatureSelected(f, false);
                     }
                 });
             }
-            else {
-                const options = DEFAULT_DRAWING_MANAGER_OPTIONS(this.isEditingEnabled());
-                this._drawingManager?.setOptions(options);
-                this._drawingManager?.setMap(this.googleMap);
-            }
         }
     }
     isEditingEnabled() {
@@ -590,58 +528,138 @@ class GoogleMapsService {
             }
         });
     }
+    /** Whether polygon drawing mode is currently active. */
+    isDrawing() {
+        return this._terraDraw?.getMode() === 'polyline';
+    }
+    /** Enter polygon drawing mode. */
+    startDrawing() {
+        if (!this._terraDraw || !this._terraDrawReady || !this.isEditingEnabled()) {
+            return;
+        }
+        // Clear any selection when entering drawing mode. Otherwise a selected
+        // feature and the shape being drawn both appear selected, reading as one
+        // shape even though they are unrelated.
+        this._assertInitialized();
+        this.googleMap.data.forEach((f) => {
+            if (isFeatureSelected(f)) {
+                setFeatureSelected(f, false);
+            }
+        });
+        this._terraDraw.setMode('polyline');
+        this._drawingSubject.next(true);
+    }
     /**
-     * Stops the current drawing.
+     * Cancel any in-progress drawing and leave drawing mode. Switching to the
+     * `static` mode clears an unfinished line.
      */
     stopDrawing() {
-        this._ngZone.runOutsideAngular(() => {
-            if (isNullOrUndefined(this._drawingManager) ||
-                this._drawingManager.getDrawingMode() === null) {
-                return;
-            }
-            // Listening for the completion event of the overlay currently being drawn
-            // and removing it. I haven't found a way to cancel the current drawing,
-            // without this hack that assumes our listeners will not run into a race
-            // condition.
-            const listener = google.maps.event.addListener(this._drawingManager, 'overlaycomplete', (event) => {
-                event.overlay?.setMap(null);
-                listener.remove();
-            });
-            // To fake canceling the current drawing, without disabling the drawing
-            // mode, the drawing mode is being unset then immediately set back. When
-            // the mode is unset the 'overlaycomplete' event will fire, which will
-            // give a reference to the current overlay to remove, then it is set back
-            // to the mode the user was using. To the user is should just seem like
-            // the current drawing was canceled and they can start drawing again.
-            const mode = this._drawingManager.getDrawingMode();
-            this._drawingManager.setDrawingMode(null);
-            this._drawingManager.setDrawingMode(mode);
-            // 'overlaycomplete' should fire immediately, unless an overlay hadn't
-            // started drawing. This timeout will make sure the listener gets removed.
-            setTimeout(() => {
-                listener.remove();
-            });
-        });
+        if (!this._terraDraw || !this._terraDrawReady) {
+            return;
+        }
+        this._terraDraw.setMode('static');
+        this._drawingSubject.next(false);
     }
-    _initDrawingManager() {
-        if (notNullOrUndefined(this._drawingManager)) {
-            throw Error(`DrawingManager is already initialized.`);
+    _initTerraDraw() {
+        if (notNullOrUndefined(this._terraDraw)) {
+            throw Error(`Terra Draw is already initialized.`);
         }
         this._assertInitialized();
-        const options = DEFAULT_DRAWING_MANAGER_OPTIONS(this.isEditingEnabled());
-        const drawingManager = new google.maps.drawing.DrawingManager(options);
-        drawingManager.setMap(this.googleMap);
-        this._drawingManager = drawingManager;
-        this._drawingManager.addListener('drawingmode_changed', (event) => {
-            if (this._drawingManager?.getDrawingMode() !== null) {
-                this._assertInitialized();
-                this.googleMap.data.forEach((f) => {
-                    if (isFeatureSelected(f)) {
-                        setFeatureSelected(f, false);
-                    }
-                });
+        // The Google Maps adapter creates an OverlayView on the map; ensure the map
+        // element has an id (harmless if one is already present).
+        const div = this.googleMap.getDiv();
+        if (!div.id) {
+            div.id = `seam-google-map-${Math.floor(performance.now())}`;
+        }
+        const pointerDistance = 10;
+        // KNOWN ISSUE (upstream, unresolved): after repeated draws, Terra Draw can
+        // intermittently lose pointer control of the Google Maps adapter, so input
+        // pans the map instead of drawing until the page is reloaded. This is a race
+        // between Terra Draw and the Google Maps adapter, tracked at
+        // https://github.com/JamesLMilner/terra-draw/issues/710 (open as of
+        // terra-draw 1.32.0 / adapter 1.6.1). It is not fixable in this wrapper;
+        // revisit when the upstream issue is resolved.
+        const draw = new TerraDraw({
+            adapter: new TerraDrawGoogleMapsAdapter({
+                lib: google.maps,
+                map: this.googleMap,
+                // Render Terra Draw's in-progress/finished geometry on its OWN Data
+                // layer instead of the map's shared `map.data`. Without this, Terra
+                // Draw's features land in the same layer this service manages, so the
+                // exterior-feature search would match a just-drawn polygon against its
+                // own rendered copy (cutting a hole equal to itself) and getGeoJson
+                // would serialize Terra Draw's transient features.
+                isolatedData: true,
+            }),
+            modes: [
+                new TerraDrawPolyLineMode({
+                    // Tighten how close a click must be to the first point to close the
+                    // polygon (Terra Draw's default ~40px felt too far / closed too
+                    // easily).
+                    pointerDistance,
+                    // Snap the moving vertex onto the line's OWN first point when the
+                    // cursor is within a few pixels of it, so it's clear the ends are
+                    // about to meet just before the click that closes the polygon.
+                    // (Terra Draw's built-in `toCoordinate` only snaps to OTHER features'
+                    // points — excluding the line being drawn — so it does nothing here.)
+                    snapping: {
+                        toCustom: (event, ctx) => {
+                            const geometry = ctx.getCurrentGeometrySnapshot();
+                            if (!geometry) {
+                                return undefined;
+                            }
+                            const ring = geometry.type === 'LineString'
+                                ? geometry.coordinates
+                                : geometry.coordinates[0];
+                            // Only offer the closing snap once enough points exist to form a
+                            // polygon (placed points plus the live cursor point).
+                            if (!ring || ring.length < 4) {
+                                return undefined;
+                            }
+                            const first = ring[0];
+                            const firstPixel = ctx.project(first[0], first[1]);
+                            const distance = Math.hypot(firstPixel.x - event.containerX, firstPixel.y - event.containerY);
+                            const SNAP_DISTANCE_PX = pointerDistance;
+                            return distance <= SNAP_DISTANCE_PX ? first : undefined;
+                        },
+                    },
+                    // Draw as an open line that closes into a polygon when the start point
+                    // is clicked (the old Drawing manager's feel): while drawing you see a
+                    // line, and the shape only "fills in" once committed to the map's Data
+                    // layer, which is the clear "done" signal. Black line, small white
+                    // closing/snapping dots (like the edit anchors), no fill on Terra
+                    // Draw's transient polygon. Terra Draw requires hex colors.
+                    styles: {
+                        lineStringColor: '#000000',
+                        lineStringWidth: 2,
+                        polygonFillOpacity: 0,
+                        polygonOutlineColor: '#000000',
+                        polygonOutlineWidth: 2,
+                        closingPointColor: '#ffffff',
+                        closingPointWidth: 4,
+                        closingPointOutlineColor: '#000000',
+                        closingPointOutlineWidth: 1,
+                        snappingPointColor: '#ffffff',
+                        snappingPointWidth: 4,
+                        snappingPointOutlineColor: '#000000',
+                        snappingPointOutlineWidth: 1,
+                    },
+                }),
+            ],
+        });
+        draw.on('ready', () => {
+            this._terraDrawReady = true;
+            // Start in the resting (non-drawing) mode.
+            draw.setMode('static');
+        });
+        draw.on('finish', (id, context) => {
+            if (context.action !== 'draw') {
+                return;
             }
+            this._ngZone.run(() => this._onDrawFinished(id));
         });
+        draw.start();
+        this._terraDraw = draw;
     }
     addControl(element, position) {
         this._assertInitialized();
@@ -703,6 +721,12 @@ class GoogleMapsService {
         // Select a feature when clicked.
         this.googleMap.data.addListener('click', (event) => {
             this._assertInitialized();
+            // While drawing, a click on an existing polygon is placing a vertex,
+            // not selecting a feature. Selecting here would both steal the click
+            // and leave a misleading selection (see startDrawing's deselect).
+            if (this.isDrawing()) {
+                return;
+            }
             setFeatureSelected(event.feature, true);
             this.googleMap.data.forEach((f) => {
                 if (f !== event.feature && isFeatureSelected(f)) {
@@ -752,54 +776,6 @@ class GoogleMapsService {
             }
             this._openContextMenuForFeature(event.feature, event.latLng ?? undefined);
         });
-        if (notNullOrUndefined(this._drawingManager)) {
-            google.maps.event.addListener(this._drawingManager, 'polygoncomplete', (polygon) => {
-                // The DrawingManager doesn't seem to have a way to access the overlays,
-                // so if the map is not set then it shouldn'y be considered a successful
-                // completion. I am canceling the active drawing by disabling drawing
-                // mode and setting the map null in the 'overlaycomplete' event, which
-                // fires before the 'polygoncomplete' event.
-                if (isNullOrUndefined(polygon.getMap())) {
-                    return;
-                }
-                this._assertInitialized();
-                // TODO: See if there is a way to prevent the polygon from completing
-                // without enough points. This is very low priority, because starting
-                // over after adding a single point isn't a major inconvenience.
-                if (!polygonHasValidPathsLengths(polygon)) {
-                    // Remove the drawn polygon.
-                    polygon.setMap(null);
-                    // Stop drawing.
-                    this._drawingManager?.setDrawingMode(null);
-                    return;
-                }
-                // Create a map feature of the drawn polygon.
-                const feature = createDataFeatureFromPolygon(polygon);
-                // Remove the drawn polygon.
-                polygon.setMap(null);
-                // Stop drawing.
-                this._drawingManager?.setDrawingMode(null);
-                // Check if the feature should be used as a cutout to an existing
-                // feature or added as it's own feature.
-                const exteriorPolygonFeature = this._allowDrawingHoleInPolygon
-                    ? getPossibleExteriorFeature(this.googleMap.data, feature)
-                    : undefined;
-                if (exteriorPolygonFeature) {
-                    addInnerFeatureCutoutToExteriorFeature(exteriorPolygonFeature, feature);
-                    setFeatureSelected(exteriorPolygonFeature, true);
-                }
-                else {
-                    this.googleMap.data.add(feature);
-                    setFeatureSelected(feature, true);
-                }
-            });
-        }
-    }
-    isDrawing() {
-        if (isNullOrUndefined(this._drawingManager)) {
-            return true;
-        }
-        return this._drawingManager.getDrawingMode() !== null;
     }
     // TODO: Refactor out of the service meant to just wrap the google maps api.
     hasSelectedFeature() {
@@ -867,6 +843,74 @@ class GoogleMapsService {
                 'Please wait for the API to load before trying to interact with it.');
         }
     }
+    _onDrawFinished(id) {
+        const feature = this._terraDraw?.getSnapshotFeature(id);
+        this._terraDraw?.removeFeatures([id]);
+        this.stopDrawing();
+        const drawn = feature ? this._toDrawnPolygon(feature.geometry) : undefined;
+        if (!drawn || !polygonHasMinDistinctVertices(drawn, 3)) {
+            return;
+        }
+        this._assertInitialized();
+        const exteriorFeature = this._allowDrawingHoleInPolygon
+            ? this._getPossibleExteriorFeature(drawn)
+            : undefined;
+        if (exteriorFeature) {
+            const exteriorPolygon = geoJsonPolygonFromDataFeature(exteriorFeature);
+            if (exteriorPolygon) {
+                const merged = addHoleToPolygon(exteriorPolygon, drawn);
+                // Mutate the EXISTING feature instance to preserve its identity and
+                // properties (see design constraints).
+                exteriorFeature.setGeometry(dataPolygonFromGeoJson(merged));
+                setFeatureSelected(exteriorFeature, true);
+                return;
+            }
+        }
+        const newFeature = new google.maps.Data.Feature({
+            geometry: dataPolygonFromGeoJson(drawn),
+        });
+        this.googleMap.data.add(newFeature);
+        setFeatureSelected(newFeature, true);
+    }
+    /**
+     * Normalize a finished Terra Draw geometry into a Polygon. A Polygon (the
+     * user closed the line on its start point) passes through; an open LineString
+     * (the user finished without closing) is closed into a polygon so nothing
+     * they drew is discarded. Any other geometry type yields undefined.
+     */
+    _toDrawnPolygon(geometry) {
+        if (geometry.type === 'Polygon') {
+            return geometry;
+        }
+        if (geometry.type === 'LineString') {
+            const polygon = {
+                type: 'Polygon',
+                coordinates: [[...geometry.coordinates]],
+            };
+            closePolygons(polygon);
+            return polygon;
+        }
+        return undefined;
+    }
+    /**
+     * Find an existing Polygon feature that fully contains the drawn polygon, so
+     * the drawing can be applied as a cutout. Returns the existing feature
+     * instance (never a copy).
+     */
+    _getPossibleExteriorFeature(drawn) {
+        this._assertInitialized();
+        let match;
+        this.googleMap.data.forEach((f) => {
+            if (match) {
+                return;
+            }
+            const candidate = geoJsonPolygonFromDataFeature(f);
+            if (candidate && polygonContains(candidate, drawn)) {
+                match = f;
+            }
+        });
+        return match;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GoogleMapsService, deps: [{ token: MapValueManagerService }, { token: i0.NgZone }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GoogleMapsService });
 }
@@ -950,6 +994,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: GoogleMapsService }, { type: i0.Injector }, { type: i0.ViewContainerRef }] });
 
+class TheSeamGoogleMapsDrawButtonControlComponent {
+    _googleMaps = inject(GoogleMapsService);
+    _data = inject(MAP_CONTROL_DATA, { optional: true });
+    _active = toSignal(this._googleMaps.drawing$, {
+        initialValue: false,
+    });
+    label = this._data?.label ?? 'Draw Field';
+    icon = this._data?.icon ?? faDrawPolygon;
+    _onClick() {
+        if (this._googleMaps.isDrawing()) {
+            this._googleMaps.stopDrawing();
+        }
+        else {
+            this._googleMaps.startDrawing();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamGoogleMapsDrawButtonControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TheSeamGoogleMapsDrawButtonControlComponent, isStandalone: true, selector: "button[seam-google-maps-draw-button-control]", host: { attributes: { "type": "button" }, listeners: { "click": "_onClick()" }, properties: { "attr.draggable": "false", "attr.aria-label": "label", "attr.title": "label", "attr.aria-pressed": "_active()", "class.active": "_active()" }, classAttribute: "gmnoprint gm-control-active" }, ngImport: i0, template: "<seam-icon [icon]=\"icon\" iconType=\"image-fill\"></seam-icon>\n", styles: [":host{box-sizing:border-box;position:absolute;height:40px;width:40px;margin:10px;padding:8px;border:0px;border-radius:2px;background:none #fff;box-shadow:#0000004d 0 1px 4px -1px;color:#666;text-transform:none;appearance:none;cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden}:host.active{color:#000;box-shadow:#0000004d 0 1px 4px -1px,inset 0 0 0 2px #000}\n"], dependencies: [{ kind: "ngmodule", type: TheSeamIconModule }, { kind: "component", type: i2.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamGoogleMapsDrawButtonControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[seam-google-maps-draw-button-control]', imports: [TheSeamIconModule], host: {
+                        '(click)': '_onClick()',
+                        '[attr.draggable]': 'false',
+                        '[attr.aria-label]': 'label',
+                        '[attr.title]': 'label',
+                        '[attr.aria-pressed]': '_active()',
+                        '[class.active]': '_active()',
+                        type: 'button',
+                        class: 'gmnoprint gm-control-active',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<seam-icon [icon]=\"icon\" iconType=\"image-fill\"></seam-icon>\n", styles: [":host{box-sizing:border-box;position:absolute;height:40px;width:40px;margin:10px;padding:8px;border:0px;border-radius:2px;background:none #fff;box-shadow:#0000004d 0 1px 4px -1px;color:#666;text-transform:none;appearance:none;cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden}:host.active{color:#000;box-shadow:#0000004d 0 1px 4px -1px,inset 0 0 0 2px #000}\n"] }]
+        }] });
+
 /**
  *
  */
@@ -1359,6 +1436,10 @@ class TheSeamGoogleMapsComponent extends _TheSeamGoogleMapsMixinBase {
         data: { label: 'Center on Field', icon: faCrosshairs },
         position: 9 /* google.maps.ControlPosition.RIGHT_BOTTOM */,
     };
+    _drawControlDef = {
+        component: TheSeamGoogleMapsDrawButtonControlComponent,
+        position: 1 /* google.maps.ControlPosition.TOP_LEFT */,
+    };
     _focusOrigin = null;
     set value(value) {
         this._mapValueManager.setValue(value, MapValueSource.Input);
@@ -1579,7 +1660,7 @@ class TheSeamGoogleMapsComponent extends _TheSeamGoogleMapsMixinBase {
                 useExisting: forwardRef(() => TheSeamGoogleMapsComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "featureContextMenu", first: true, predicate: ["featureContextMenu"], descendants: true, read: MenuComponent, static: true }], exportAs: ["seamGoogleMaps"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"_gmApiLoaded | async\">\n  <google-map\n    height=\"100%\"\n    width=\"100%\"\n    [center]=\"{ lat: latitude, lng: longitude }\"\n    [zoom]=\"zoom\"\n    [options]=\"_options\"\n    (mapInitialized)=\"_onMapReady($any($event))\"\n  >\n  </google-map>\n</ng-container>\n<seam-menu #featureContextMenu>\n  <button\n    seamMenuItem\n    *ngFor=\"let item of _contextMenuItems$ | async\"\n    (click)=\"item.action(item)\"\n  >\n    {{ item.label }}\n  </button>\n</seam-menu>\n<seam-map-file-drop *ngIf=\"fileDropEnabled\"></seam-map-file-drop>\n\n<seam-map-control\n  *ngIf=\"fileUploadControlEnabled\"\n  [def]=\"_fileUploadControlDef\"\n></seam-map-control>\n<seam-map-control\n  *ngIf=\"reCenterControlEnabled\"\n  [def]=\"_reCenterControlDef\"\n></seam-map-control>\n", styles: [":host{display:block;position:relative;height:400px;width:100%}:host.show-focus-border.cdk-focused{outline:0;box-shadow:0 0 0 .2rem #357ebd40}:host.show-focus-border[disabled]{opacity:.65}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "component", type: i6.MenuItemComponent, selector: "[seamMenuItem]", inputs: ["disabled", "role", "icon", "iconClass", "sublevelIcon", "subLevelIconClass", "badgeText", "badgeTheme"], exportAs: ["seamMenuItem"] }, { kind: "component", type: i7.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "component", type: TheSeamMapFileDropComponent, selector: "seam-map-file-drop" }, { kind: "component", type: TheSeamMapsControlComponent, selector: "seam-map-control", inputs: ["def"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "featureContextMenu", first: true, predicate: ["featureContextMenu"], descendants: true, read: MenuComponent, static: true }], exportAs: ["seamGoogleMaps"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"_gmApiLoaded | async\">\n  <google-map\n    height=\"100%\"\n    width=\"100%\"\n    [center]=\"{ lat: latitude, lng: longitude }\"\n    [zoom]=\"zoom\"\n    [options]=\"_options\"\n    (mapInitialized)=\"_onMapReady($any($event))\"\n  >\n  </google-map>\n</ng-container>\n<seam-menu #featureContextMenu>\n  <button\n    seamMenuItem\n    *ngFor=\"let item of _contextMenuItems$ | async\"\n    (click)=\"item.action(item)\"\n  >\n    {{ item.label }}\n  </button>\n</seam-menu>\n<seam-map-file-drop *ngIf=\"fileDropEnabled\"></seam-map-file-drop>\n\n<seam-map-control\n  *ngIf=\"fileUploadControlEnabled\"\n  [def]=\"_fileUploadControlDef\"\n></seam-map-control>\n<seam-map-control\n  *ngIf=\"reCenterControlEnabled\"\n  [def]=\"_reCenterControlDef\"\n></seam-map-control>\n<seam-map-control\n  *ngIf=\"editingEnabled\"\n  [def]=\"_drawControlDef\"\n></seam-map-control>\n", styles: [":host{display:block;position:relative;height:400px;width:100%}:host.show-focus-border.cdk-focused{outline:0;box-shadow:0 0 0 .2rem #357ebd40}:host.show-focus-border[disabled]{opacity:.65}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "component", type: i6.MenuItemComponent, selector: "[seamMenuItem]", inputs: ["disabled", "role", "icon", "iconClass", "sublevelIcon", "subLevelIconClass", "badgeText", "badgeTheme"], exportAs: ["seamMenuItem"] }, { kind: "component", type: i7.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "component", type: TheSeamMapFileDropComponent, selector: "seam-map-file-drop" }, { kind: "component", type: TheSeamMapsControlComponent, selector: "seam-map-control", inputs: ["def"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 __decorate([
     InputBoolean()
@@ -1625,7 +1706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => TheSeamGoogleMapsComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'seamGoogleMaps', standalone: false, template: "<ng-container *ngIf=\"_gmApiLoaded | async\">\n  <google-map\n    height=\"100%\"\n    width=\"100%\"\n    [center]=\"{ lat: latitude, lng: longitude }\"\n    [zoom]=\"zoom\"\n    [options]=\"_options\"\n    (mapInitialized)=\"_onMapReady($any($event))\"\n  >\n  </google-map>\n</ng-container>\n<seam-menu #featureContextMenu>\n  <button\n    seamMenuItem\n    *ngFor=\"let item of _contextMenuItems$ | async\"\n    (click)=\"item.action(item)\"\n  >\n    {{ item.label }}\n  </button>\n</seam-menu>\n<seam-map-file-drop *ngIf=\"fileDropEnabled\"></seam-map-file-drop>\n\n<seam-map-control\n  *ngIf=\"fileUploadControlEnabled\"\n  [def]=\"_fileUploadControlDef\"\n></seam-map-control>\n<seam-map-control\n  *ngIf=\"reCenterControlEnabled\"\n  [def]=\"_reCenterControlDef\"\n></seam-map-control>\n", styles: [":host{display:block;position:relative;height:400px;width:100%}:host.show-focus-border.cdk-focused{outline:0;box-shadow:0 0 0 .2rem #357ebd40}:host.show-focus-border[disabled]{opacity:.65}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'seamGoogleMaps', standalone: false, template: "<ng-container *ngIf=\"_gmApiLoaded | async\">\n  <google-map\n    height=\"100%\"\n    width=\"100%\"\n    [center]=\"{ lat: latitude, lng: longitude }\"\n    [zoom]=\"zoom\"\n    [options]=\"_options\"\n    (mapInitialized)=\"_onMapReady($any($event))\"\n  >\n  </google-map>\n</ng-container>\n<seam-menu #featureContextMenu>\n  <button\n    seamMenuItem\n    *ngFor=\"let item of _contextMenuItems$ | async\"\n    (click)=\"item.action(item)\"\n  >\n    {{ item.label }}\n  </button>\n</seam-menu>\n<seam-map-file-drop *ngIf=\"fileDropEnabled\"></seam-map-file-drop>\n\n<seam-map-control\n  *ngIf=\"fileUploadControlEnabled\"\n  [def]=\"_fileUploadControlDef\"\n></seam-map-control>\n<seam-map-control\n  *ngIf=\"reCenterControlEnabled\"\n  [def]=\"_reCenterControlDef\"\n></seam-map-control>\n<seam-map-control\n  *ngIf=\"editingEnabled\"\n  [def]=\"_drawControlDef\"\n></seam-map-control>\n", styles: [":host{display:block;position:relative;height:400px;width:100%}:host.show-focus-border.cdk-focused{outline:0;box-shadow:0 0 0 .2rem #357ebd40}:host.show-focus-border[disabled]{opacity:.65}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.FocusMonitor }, { type: GoogleMapsService }, { type: MapValueManagerService }, { type: TheSeamGoogleMapsApiLoader }], propDecorators: { value: [{
                 type: Input
             }], tabIndex: [{
@@ -2244,5 +2325,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AppFeaturePropertyName, GoogleMapsContextMenu, GoogleMapsControlsService, GoogleMapsService, MAP_CONTROLS_SERVICE, MAP_CONTROL_DATA, MapControlRef, MapValueManagerService, MapValueSource, SEAM_GOOGLE_PLACES_AUTOCOMPLETE_DEFAULT_OPTIONS, THESEAM_LAZY_MAPS_API_CONFIG, TheSeamGoogleMapsApiLoader, TheSeamGoogleMapsComponent, TheSeamGoogleMapsModule, TheSeamGoogleMapsPlacesAutoCompleteComponent, TheSeamGoogleMapsPlacesAutocompleteDirective, TheSeamGoogleMapsRecenterButtonControlComponent, TheSeamGoogleMapsUploadButtonControlComponent, TheSeamLazyMapsApiLoader, TheSeamMapFileDropComponent, TheSeamMapsControlComponent, TheSeamNoopGoogleMapsAPILoader, addInnerFeatureCutoutToExteriorFeature, createDataFeatureFromPolygon, createFeatureChangeObservable, featureContains, fixPathDifferentStartingAndEndingPoint, getBoundsWithAllFeatures, getFeatureBounds, getFeatureCenter, getFeaturesCount, getHoveredStyleOptionsDefinedByFeature, getPossibleExteriorFeature, getSelectedStyleOptionsDefinedByFeature, getStyleOptionsDefinedByFeature, isAppFeatureProperty, isFeatureSelected, multiPolygonCoordinates, polygonCoordinates, polygonHasValidPathsLengths, removeAllFeatures, setFeatureSelected, stripAppFeaturePropertiesFromJson, toTurfJsFeature, toTurfJsMultiPolygon, toTurfJsPolygon };
+export { AppFeaturePropertyName, GoogleMapsContextMenu, GoogleMapsControlsService, GoogleMapsService, MAP_CONTROLS_SERVICE, MAP_CONTROL_DATA, MapControlRef, MapValueManagerService, MapValueSource, SEAM_GOOGLE_PLACES_AUTOCOMPLETE_DEFAULT_OPTIONS, THESEAM_LAZY_MAPS_API_CONFIG, TheSeamGoogleMapsApiLoader, TheSeamGoogleMapsComponent, TheSeamGoogleMapsModule, TheSeamGoogleMapsPlacesAutoCompleteComponent, TheSeamGoogleMapsPlacesAutocompleteDirective, TheSeamGoogleMapsRecenterButtonControlComponent, TheSeamGoogleMapsUploadButtonControlComponent, TheSeamLazyMapsApiLoader, TheSeamMapFileDropComponent, TheSeamMapsControlComponent, TheSeamNoopGoogleMapsAPILoader, createFeatureChangeObservable, dataPolygonFromGeoJson, geoJsonPolygonFromDataFeature, getBoundsWithAllFeatures, getFeatureBounds, getFeatureCenter, getFeaturesCount, getHoveredStyleOptionsDefinedByFeature, getSelectedStyleOptionsDefinedByFeature, getStyleOptionsDefinedByFeature, isAppFeatureProperty, isFeatureSelected, polygonCoordinates, polygonHasValidPathsLengths, removeAllFeatures, setFeatureSelected, stripAppFeaturePropertiesFromJson };
 //# sourceMappingURL=theseam-ui-common-google-maps.mjs.map