@axdspub/axiom-ui-forms 0.2.8 → 0.2.9-alpha.0

package/library/esm/src/Form/Components/Inputs/Geometry.js

@@ -3,28 +3,39 @@ import { Button, TextArea } from '../../../../node_modules/@axdspub/axiom-ui-uti
 import FieldLabel from '../FieldLabel.js';
 import { EMapShape } from '../../../../node_modules/@axdspub/axiom-maps/library/index.js';
 import { OpenLayersMap as OpenLayersMapComponent } from '../../../../node_modules/@axdspub/axiom-maps/library/openlayers/index.esm.js';
-import React__default, { useState, useEffect } from 'react';
-import { SquareIcon, BorderSolidIcon, DrawingPinFilledIcon, TrashIcon } from '../../../../node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
+import React__default, { useState, useEffect, useCallback } from 'react';
+import { DrawingPinFilledIcon, BorderSolidIcon, SquareIcon, TrashIcon } from '../../../../node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
 
 /*
 List of coordinates for testing. Around Anchorage.
-61.44480592425796, -150.3785489314675
-61.26059021199541, -150.7356022485971
-61.05235501381105, -150.61435734866856
-61.06014246374005, -149.9221328461051
-61.441517540302925, -149.16102284579276
-61.44480592425796, -150.3785489314675
+...
 */
+// --- calculateCenterFromGeoJSON remains the same (zoom ignored for initial load) ---
 var calculateCenterFromGeoJSON = function (geo) {
-    if (!geo || !('features' in geo) || !Array.isArray(geo.features) || geo.features.length === 0) {
+    var _a;
+    // ... (Implementation from previous correct version) ...
+    // If input is Geometry, wrap it temporarily for calculation
+    var featureCollection;
+    if (geo && geo.type !== 'FeatureCollection') {
+        if (geo.type === 'Feature') {
+            featureCollection = { type: 'FeatureCollection', features: [geo] };
+        }
+        else if (geo.type === 'Point' || geo.type === 'LineString' || geo.type === 'Polygon' /* add others as needed */) {
+            featureCollection = { type: 'FeatureCollection', features: [{ type: 'Feature', properties: {}, geometry: geo }] };
+        }
+    }
+    else if (geo && geo.type === 'FeatureCollection') {
+        featureCollection = geo;
+    }
+    if (!featureCollection || !('features' in featureCollection) || !Array.isArray(featureCollection.features) || featureCollection.features.length === 0) {
         return { lat: 61.2181, lon: -149.9003, zoom: 8 }; // Default to Anchorage
     }
-    var feature = geo.features[0];
+    var feature = featureCollection.features[0];
     if (!(feature === null || feature === void 0 ? void 0 : feature.geometry)) {
         return { lat: 61.2181, lon: -149.9003, zoom: 8 };
     }
     var geometry = feature.geometry;
-    var coordinates = [];
+    var coordinates = []; // Adjusted type
     switch (geometry.type) {
         case 'Polygon':
             coordinates = geometry.coordinates[0]; // Get first ring (ignore holes)
@@ -33,12 +44,22 @@ var calculateCenterFromGeoJSON = function (geo) {
             coordinates = geometry.coordinates;
             break;
         case 'Point':
-            coordinates = [geometry.coordinates];
+            coordinates = [geometry.coordinates]; // Wrap single point for uniform handling
             break;
         default:
             return { lat: 61.2181, lon: -149.9003, zoom: 8 };
     }
-    if (!Array.isArray(coordinates) || coordinates.length === 0) {
+    // Flatten coordinates for bounds calculation if needed (e.g., MultiPoint, MultiLineString)
+    var flatCoordinates = (_a = []).concat.apply(_a, coordinates);
+    if (!Array.isArray(flatCoordinates) || flatCoordinates.length === 0 || !Array.isArray(flatCoordinates[0])) {
+        // Handle single point case where flatCoordinates might be just [lon, lat]
+        if (Array.isArray(flatCoordinates) && flatCoordinates.length === 2 && typeof flatCoordinates[0] === 'number') {
+            var _b = flatCoordinates, lon = _b[0], lat = _b[1];
+            // FIX #2: Return a default zoom even for a point here for centering logic,
+            // but we won't use this zoom for the initial MAP_CONFIG.
+            return { lat: lat, lon: lon, zoom: 8 }; // Default zoom
+        }
+        console.warn('Could not determine coordinates for centering.');
         return { lat: 61.2181, lon: -149.9003, zoom: 8 };
     }
     // Calculate bounds
@@ -49,7 +70,9 @@ var calculateCenterFromGeoJSON = function (geo) {
     var sumLat = 0;
     var sumLon = 0;
     var count = 0;
-    coordinates.forEach(function (coord) {
+    flatCoordinates.forEach(function (coord) {
+        if (!Array.isArray(coord) || coord.length < 2)
+            return;
         var lon = coord[0], lat = coord[1];
         minLat = Math.min(minLat, lat);
         maxLat = Math.max(maxLat, lat);
@@ -59,72 +82,202 @@ var calculateCenterFromGeoJSON = function (geo) {
         sumLon += lon;
         count++;
     });
-    // Calculate center
+    if (count === 0) {
+        return { lat: 61.2181, lon: -149.9003, zoom: 8 };
+    }
     var centerLat = sumLat / count;
     var centerLon = sumLon / count;
-    // Calculate zoom level based on bounds
     var latDiff = maxLat - minLat;
     var lonDiff = maxLon - minLon;
     var maxDiff = Math.max(latDiff, lonDiff);
-    // Adjust zoom based on the size of the shape
     var zoom = 8; // default zoom
-    if (maxDiff < 0.1)
-        zoom = 12; // very small shape
+    if (count === 1 || maxDiff === 0)
+        zoom = 12;
+    else if (maxDiff < 0.1)
+        zoom = 12;
     else if (maxDiff < 0.5)
-        zoom = 10; // small shape
+        zoom = 10;
     else if (maxDiff < 1)
-        zoom = 9; // medium shape
+        zoom = 9;
     else if (maxDiff < 2)
-        zoom = 8; // large shape
+        zoom = 8;
     else if (maxDiff < 5)
-        zoom = 7; // very large shape
+        zoom = 7;
     else
-        zoom = 6; // huge shape
-    return {
-        lat: centerLat,
-        lon: centerLon,
-        zoom: zoom
-    };
+        zoom = 6;
+    return { lat: centerLat, lon: centerLon, zoom: zoom };
+};
+// Update getInitialDrawType function signature
+var getInitialDrawType = function (field) {
+    var _a;
+    var settings = (_a = field.settings) !== null && _a !== void 0 ? _a : {};
+    var drawEnabled = settings.drawEnabled !== false;
+    var drawPointEnabled = settings.drawPointEnable === true && drawEnabled;
+    var drawPathEnabled = settings.drawPathEnabled === true && drawEnabled;
+    var drawPolygonEnabled = settings.drawPolygonEnabled === true && drawEnabled;
+    if (drawPointEnabled)
+        return EMapShape.point;
+    if (drawPathEnabled)
+        return EMapShape.linestring;
+    if (drawPolygonEnabled)
+        return EMapShape.polygon;
+    return EMapShape.point; // Defaulting to Point if none specified
 };
-var GeoJSONInput = function (_a) {
+var GeometryInput = function (_a) {
     var _b, _c, _d, _e, _f;
     var field = _a.field, onChange = _a.onChange, value = _a.value;
-    console.log('INITIAL VALUE', value);
-    var initialGeoJSON = value;
-    var initialMapConfig = calculateCenterFromGeoJSON(initialGeoJSON);
-    var _g = useState(EMapShape.polygon), currentDrawType = _g[0], setCurrentDrawType = _g[1];
-    var _h = useState(false), isDrawing = _h[0], setIsDrawing = _h[1];
-    // Draw settings
-    var drawEnabled = ((_b = field.settings) === null || _b === void 0 ? void 0 : _b.drawEnabled) !== false; // Default to true if not specified
-    var drawPolygonEnabled = ((_c = field.settings) === null || _c === void 0 ? void 0 : _c.drawPolygonEnabled) !== false && drawEnabled; // Default to true if drawEnabled and not specified
-    var drawPathEnabled = ((_d = field.settings) === null || _d === void 0 ? void 0 : _d.drawPathEnabled) !== false && drawEnabled; // Default to true if drawEnabled and not specified
-    var drawPointEnabled = ((_e = field.settings) === null || _e === void 0 ? void 0 : _e.drawPointEnabled) !== false && drawEnabled; // Default to true if drawEnabled and not specified
-    var showCoordinateInput = ((_f = field.settings) === null || _f === void 0 ? void 0 : _f.showCoordinateInput) !== false; // Default to true if not specified
-    // Set initial draw type based on enabled tools
+    var _g = useState(undefined), map = _g[0], setMapState = _g[1];
+    var _h = useState(undefined), error = _h[0], setError = _h[1];
+    var showGeoJSONInput = useState(false)[0];
+    // Initialize geojson state from value prop
+    var _j = useState(function () {
+        if (value && typeof value === 'object' && 'type' in value && value.type !== 'FeatureCollection' && value.type !== 'Feature') {
+            return { type: 'Feature', properties: {}, geometry: value };
+        }
+        if (value && typeof value === 'object' && 'type' in value && value.type === 'Feature') {
+            return value;
+        }
+        return undefined;
+    }), geojson = _j[0], setGeojson = _j[1];
+    // Initialize drawing state - only true if no initial shape and drawing is enabled
+    var _k = useState(false), isDrawing = _k[0], setIsDrawing = _k[1];
+    var _l = useState(function () { return getInitialDrawType(field); }), currentDrawType = _l[0], setCurrentDrawType = _l[1];
+    // Settings from field props
+    var drawEnabled = ((_b = field.settings) === null || _b === void 0 ? void 0 : _b.drawEnabled) !== false;
+    var drawPointEnabled = ((_c = field.settings) === null || _c === void 0 ? void 0 : _c.drawPointEnable) === true && drawEnabled;
+    var drawPathEnabled = ((_d = field.settings) === null || _d === void 0 ? void 0 : _d.drawPathEnabled) === true && drawEnabled;
+    var drawPolygonEnabled = ((_e = field.settings) === null || _e === void 0 ? void 0 : _e.drawPolygonEnabled) === true && drawEnabled;
+    var showCoordinateInput = ((_f = field.settings) === null || _f === void 0 ? void 0 : _f.showCoordinateInput) !== false;
+    // Effect to handle value prop updates
     useEffect(function () {
-        if (drawPolygonEnabled) {
-            setCurrentDrawType(EMapShape.polygon);
+        var normalizedFeature;
+        if (value && typeof value === 'object' && 'type' in value) {
+            if (value.type !== 'FeatureCollection' && value.type !== 'Feature') {
+                normalizedFeature = { type: 'Feature', properties: {}, geometry: value };
+            }
+            else if (value.type === 'Feature') {
+                normalizedFeature = value;
+            }
+        }
+        var currentJson = geojson ? JSON.stringify(geojson) : '';
+        var newJson = normalizedFeature ? JSON.stringify(normalizedFeature) : '';
+        if (currentJson !== newJson) {
+            setGeojson(normalizedFeature);
+            if (normalizedFeature === null || normalizedFeature === void 0 ? void 0 : normalizedFeature.geometry) {
+                setIsDrawing(false);
+            }
         }
-        else if (drawPathEnabled) {
-            setCurrentDrawType(EMapShape.linestring);
+    }, [value]);
+    // Effect to sync map state with geojson
+    useEffect(function () {
+        if (!map)
+            return;
+        // Always update map's visual state to match geojson
+        if (geojson === null || geojson === void 0 ? void 0 : geojson.geometry) {
+            map.setDrawGeojson({ type: 'FeatureCollection', features: [geojson] });
+            map.disableDraw(currentDrawType);
         }
-        else if (drawPointEnabled) {
-            setCurrentDrawType(EMapShape.point);
+        else {
+            map.setDrawGeojson({ type: 'FeatureCollection', features: [] });
+            // Only enable/disable drawing based on isDrawing state
+            if (isDrawing && drawEnabled) {
+                map.enableDraw(currentDrawType);
+            }
+            else {
+                map.disableDraw(currentDrawType);
+            }
+        }
+    }, [map, geojson, currentDrawType, isDrawing, drawEnabled]);
+    // Effect to handle map drawing events
+    useEffect(function () {
+        if (!map)
+            return;
+        var drawCompleteListener = function (e) {
+            var _a, _b, _c;
+            var f = (_c = (_b = (_a = e.data) === null || _a === void 0 ? void 0 : _a.geojson) === null || _b === void 0 ? void 0 : _b.features) === null || _c === void 0 ? void 0 : _c[0];
+            if (f) {
+                setGeojson(f);
+                setIsDrawing(false);
+                map.disableDraw(currentDrawType);
+            }
+        };
+        var drawUpdateListener = function (e) {
+            var _a, _b, _c;
+            var f = (_c = (_b = (_a = e.data) === null || _a === void 0 ? void 0 : _a.geojson) === null || _b === void 0 ? void 0 : _b.features) === null || _c === void 0 ? void 0 : _c[0];
+            if (f) {
+                setGeojson(f);
+            }
+            else {
+                // Handle deletion via map tools
+                setGeojson(undefined);
+                setIsDrawing(false); // Ensure drawing is disabled when user deletes shape
+            }
+        };
+        map.onDrawComplete(drawCompleteListener);
+        map.onDrawUpdate(drawUpdateListener);
+        // Return cleanup function that removes the event listeners
+        return function () {
+            // Remove event listeners by re-adding with empty functions
+            map.onDrawComplete(function () { });
+            map.onDrawUpdate(function () { });
+        };
+    }, [map, currentDrawType]);
+    // Effect to notify parent of changes
+    useEffect(function () {
+        var _a;
+        onChange((_a = geojson === null || geojson === void 0 ? void 0 : geojson.geometry) !== null && _a !== void 0 ? _a : undefined);
+    }, [geojson]);
+    var clearShape = function () {
+        setGeojson(undefined);
+        setCoordinates('');
+        setShowShapeTypeButtons(false);
+        if (map && drawEnabled) {
+            map.setDrawGeojson({ type: 'FeatureCollection', features: [] });
+            var iType = getInitialDrawType(field);
+            setCurrentDrawType(iType);
+            setIsDrawing(true); // Explicitly enable drawing when user clicks clear
+            map.enableDraw(iType);
         }
-    }, [drawPolygonEnabled, drawPathEnabled, drawPointEnabled]);
+    };
+    var handleDrawTypeChange = function (shapeType) {
+        if (map && drawEnabled) {
+            var isAllowed = (shapeType === EMapShape.point && drawPointEnabled) ||
+                (shapeType === EMapShape.linestring && drawPathEnabled) ||
+                (shapeType === EMapShape.polygon && drawPolygonEnabled);
+            if (isAllowed && shapeType !== currentDrawType) {
+                setGeojson(undefined);
+                map.setDrawGeojson({ type: 'FeatureCollection', features: [] });
+                setCurrentDrawType(shapeType);
+                setIsDrawing(true);
+                map.enableDraw(shapeType);
+            }
+        }
+    };
+    var handleCoordinatesChange = function (e) {
+        var newCoords = e !== null && e !== void 0 ? e : '';
+        setCoordinates(newCoords);
+        if (!newCoords.trim()) {
+            setGeojson(undefined);
+            setError(undefined);
+            setIsDrawing(false);
+            return;
+        }
+        var newFeature = createGeoJSONFromCoordinates(newCoords);
+        if (newFeature) {
+            setGeojson(newFeature);
+            setError(undefined);
+            setIsDrawing(false);
+        }
+    };
+    var initialMapCenter = calculateCenterFromGeoJSON(geojson);
+    var INITIAL_DEFAULT_ZOOM = 8; // Fixed default zoom
     var MAP_CONFIG = {
         baseLayerKey: 'hybrid',
         height: '500px',
         width: '100%',
-        style: {
-            left: '0px',
-            top: '0px',
-            right: '0px',
-            bottom: '0px',
-            padding: '0'
-        },
-        center: { lat: initialMapConfig.lat, lon: initialMapConfig.lon },
-        zoom: initialMapConfig.zoom,
+        style: { /* ... styles ... */},
+        center: { lat: initialMapCenter.lat, lon: initialMapCenter.lon },
+        zoom: INITIAL_DEFAULT_ZOOM, // Use fixed zoom
         tools: {
             draw: {
                 shape: currentDrawType,
@@ -132,341 +285,167 @@ var GeoJSONInput = function (_a) {
             }
         }
     };
-    var _j = useState(undefined), map = _j[0], setMapState = _j[1];
-    var _k = useState(undefined), error = _k[0], setError = _k[1];
-    var _l = useState(function () {
-        if (!value)
-            return undefined;
-        return value;
-    }), geojson = _l[0], setGeojson = _l[1];
-    var showGeoJSONInput = useState(false)[0]; // For debugging purposes
+    // ---- Coordinate Handling ----
+    var updateCoordinatesFromFeature = useCallback(function (feature) {
+        var _a, _b, _c;
+        if (!(feature === null || feature === void 0 ? void 0 : feature.geometry)) {
+            setCoordinates('');
+            return;
+        }
+        var geometry = feature.geometry;
+        var newCoords = '';
+        try {
+            if (geometry.type === 'Polygon') {
+                newCoords = ((_a = geometry.coordinates[0]) !== null && _a !== void 0 ? _a : []).map(function (pos) { return "".concat(pos[1], ", ").concat(pos[0]); }).join('\n');
+            }
+            else if (geometry.type === 'LineString') {
+                newCoords = ((_b = geometry.coordinates) !== null && _b !== void 0 ? _b : []).map(function (pos) { return "".concat(pos[1], ", ").concat(pos[0]); }).join('\n');
+            }
+            else if (geometry.type === 'Point') {
+                var coords = (_c = geometry.coordinates) !== null && _c !== void 0 ? _c : [NaN, NaN];
+                if (!isNaN(coords[0]) && !isNaN(coords[1])) {
+                    newCoords = "".concat(coords[1], ", ").concat(coords[0]);
+                }
+                else {
+                    newCoords = '';
+                }
+            }
+        }
+        catch (e) {
+            console.error('Err format coords:', e);
+            newCoords = '';
+        }
+        setCoordinates(newCoords);
+        // setShowShapeTypeButtons(shouldShowShapeButtons(newCoords)); // Let coordinate effect handle this
+    }, []);
     var _m = useState(function () {
-        if (!value)
+        var _a, _b, _c;
+        if (!(geojson === null || geojson === void 0 ? void 0 : geojson.geometry))
             return '';
-        var geoValue = value;
-        if ((geoValue === null || geoValue === void 0 ? void 0 : geoValue.type) === 'FeatureCollection' && Array.isArray(geoValue.features) && geoValue.features.length > 0) {
-            var feature = geoValue.features[0];
-            var geometry = feature === null || feature === void 0 ? void 0 : feature.geometry;
-            if (!geometry)
-                return '';
+        var initCoords = '';
+        var geometry = geojson.geometry;
+        try {
             if (geometry.type === 'Polygon') {
-                var coords = geometry.coordinates[0];
-                return coords.map(function (pos) { return "".concat(pos[1], ", ").concat(pos[0]); }).join('\n');
+                initCoords = ((_a = geometry.coordinates[0]) !== null && _a !== void 0 ? _a : []).map(function (pos) { return "".concat(pos[1], ", ").concat(pos[0]); }).join('\n');
             }
             else if (geometry.type === 'LineString') {
-                var coords = geometry.coordinates;
-                return coords.map(function (pos) { return "".concat(pos[1], ", ").concat(pos[0]); }).join('\n');
+                initCoords = ((_b = geometry.coordinates) !== null && _b !== void 0 ? _b : []).map(function (pos) { return "".concat(pos[1], ", ").concat(pos[0]); }).join('\n');
             }
             else if (geometry.type === 'Point') {
-                var coords = geometry.coordinates;
-                return "".concat(coords[1], ", ").concat(coords[0]);
+                var coords = (_c = geometry.coordinates) !== null && _c !== void 0 ? _c : [NaN, NaN];
+                if (!isNaN(coords[0]) && !isNaN(coords[1])) {
+                    initCoords = "".concat(coords[1], ", ").concat(coords[0]);
+                }
             }
         }
-        return '';
+        catch (e) {
+            console.error('Err init coords:', e);
+            initCoords = '';
+        }
+        return initCoords;
     }), coordinates = _m[0], setCoordinates = _m[1];
-    var getValue = function () {
-        return geojson !== undefined && geojson !== null
-            ? typeof geojson === 'object'
-                ? JSON.stringify(geojson, null, 2)
-                : String(geojson)
-            : '';
-    };
+    useEffect(function () { updateCoordinatesFromFeature(geojson); }, [geojson, updateCoordinatesFromFeature]);
     var createGeoJSONFromCoordinates = function (coordString, forceType) {
         if (!coordString.trim()) {
             setError(undefined);
             return undefined;
         }
         try {
-            var points = coordString
-                .split('\n')
-                .map(function (line) { return line.trim(); })
-                .filter(function (line) { return line.length > 0; })
-                .map(function (line) {
-                var _a = line.split(',').map(function (coord) { return parseFloat(coord.trim()); }), lat = _a[0], lon = _a[1];
-                if (isNaN(lat) || isNaN(lon)) {
-                    throw new Error('Invalid coordinate format');
-                }
-                return [lon, lat];
-            });
-            if (points.length === 0) {
-                throw new Error('No valid coordinates found');
-            }
-            // Single point
-            if (points.length === 1) {
-                return {
-                    type: 'Feature',
-                    properties: {},
-                    geometry: {
-                        type: 'Point',
-                        coordinates: points[0]
-                    }
-                };
-            }
-            // For polygon or line, based on forceType or number of points
-            if (forceType === EMapShape.polygon || (!forceType && points.length >= 3)) {
-                // Close the polygon by adding the first point at the end if not already closed
-                if (JSON.stringify(points[0]) !== JSON.stringify(points[points.length - 1])) {
+            var points = coordString.split('\n').map(function (l) { return l.trim(); }).filter(function (l) { return l; }).map(function (l) { var _a = l.split(',').map(function (c) { return parseFloat(c.trim()); }), lat = _a[0], lon = _a[1]; if (isNaN(lat) || isNaN(lon) || lat < -90 || lat > 90 || lon < -180 || lon > 180)
+                throw Error("Invalid: ".concat(lat, ", ").concat(lon)); return [lon, lat]; });
+            if (points.length === 0)
+                throw Error('No valid coords');
+            if (points.length === 1 && drawPointEnabled)
+                return { type: 'Feature', properties: {}, geometry: { type: 'Point', coordinates: points[0] } };
+            if ((forceType === EMapShape.polygon || (!forceType && points.length >= 3)) && drawPolygonEnabled) {
+                if (points.length > 0 && JSON.stringify(points[0]) !== JSON.stringify(points[points.length - 1]))
                     points.push(points[0]);
-                }
-                return {
-                    type: 'Feature',
-                    properties: {},
-                    geometry: {
-                        type: 'Polygon',
-                        coordinates: [points]
-                    }
-                };
+                if (points.length < 4)
+                    throw Error('Min 3 unique coords for polygon');
+                return { type: 'Feature', properties: {}, geometry: { type: 'Polygon', coordinates: [points] } };
             }
-            // LineString
-            return {
-                type: 'Feature',
-                properties: {},
-                geometry: {
-                    type: 'LineString',
-                    coordinates: points
-                }
-            };
+            if ((forceType === EMapShape.linestring || (!forceType && points.length >= 2)) && drawPathEnabled) {
+                if (points.length < 2)
+                    throw Error('Min 2 coords for path');
+                return { type: 'Feature', properties: {}, geometry: { type: 'LineString', coordinates: points } };
+            }
+            setError('Cannot create shape. Check tools/coords.');
+            return undefined;
         }
         catch (e) {
-            setError('Invalid coordinate format. Use "lat, lon" format, one per line');
+            setError("Invalid coords/count: ".concat(e.message, ". Use \"lat, lon\""));
             return undefined;
         }
     };
-    var _o = useState(function () {
-        // Show buttons if initial value has 2+ coordinates
-        if (!value)
-            return false;
-        var geoValue = value;
-        if ((geoValue === null || geoValue === void 0 ? void 0 : geoValue.type) === 'FeatureCollection' && Array.isArray(geoValue.features) && geoValue.features.length > 0) {
-            var feature = geoValue.features[0];
-            var geometry = feature === null || feature === void 0 ? void 0 : feature.geometry;
-            if (!geometry)
-                return false;
-            if (geometry.type === 'Polygon' || geometry.type === 'LineString') {
-                return geometry.coordinates.length >= 2;
-            }
-        }
-        return false;
-    }), showShapeTypeButtons = _o[0], setShowShapeTypeButtons = _o[1];
-    var updateCoordinatesFromGeoJSON = function (geo) {
-        var _a, _b;
-        if (!geo || geo.type !== 'FeatureCollection' || !((_b = (_a = geo.features) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.geometry))
-            return;
-        var feature = geo.features[0];
-        var geometry = feature.geometry;
-        var newCoords = '';
-        if (geometry.type === 'Polygon') {
-            var coords = geometry.coordinates[0];
-            newCoords = coords.map(function (pos) { return "".concat(pos[1], ", ").concat(pos[0]); }).join('\n');
-        }
-        else if (geometry.type === 'LineString') {
-            var coords = geometry.coordinates;
-            newCoords = coords.map(function (pos) { return "".concat(pos[1], ", ").concat(pos[0]); }).join('\n');
-        }
-        else if (geometry.type === 'Point') {
-            var coords = geometry.coordinates;
-            newCoords = "".concat(coords[1], ", ").concat(coords[0]);
-        }
-        setCoordinates(newCoords);
-        setShowShapeTypeButtons(shouldShowShapeButtons(newCoords));
-    };
-    // i think this has to stay - we're basically staying in sync with dom element outside of react
-    useEffect(function () {
-        if (map === undefined)
-            return;
-        map.onDrawComplete(function (e) {
-            var _a, _b, _c;
-            console.log('draw complete', e);
-            setGeojson((_b = (_a = e.data) === null || _a === void 0 ? void 0 : _a.geojson.features) === null || _b === void 0 ? void 0 : _b[0]);
-            updateCoordinatesFromGeoJSON((_c = e.data) === null || _c === void 0 ? void 0 : _c.geojson);
-            setIsDrawing(false);
-            // Disable drawing after shape is completed
-            map.disableDraw(currentDrawType);
-        });
-        // On modify drawing
-        map.onDrawUpdate(function (e) {
-            var _a, _b, _c, _d;
-            console.log('draw update', e);
-            setGeojson((_c = (_b = (_a = e.data) === null || _a === void 0 ? void 0 : _a.geojson) === null || _b === void 0 ? void 0 : _b.features) === null || _c === void 0 ? void 0 : _c[0]);
-            updateCoordinatesFromGeoJSON((_d = e.data) === null || _d === void 0 ? void 0 : _d.geojson);
-        });
-    }, [map]);
-    // can we get rid of this?
-    useEffect(function () {
-        if (geojson !== undefined) {
-            onChange(geojson.geometry);
-        }
-    }, [geojson]);
-    var hasValidShape = function (geo) {
-        return geo !== undefined &&
-            'features' in geo &&
-            Array.isArray(geo.features) &&
-            geo.features.length > 0;
-    };
-    var clearShape = function () {
-        setGeojson(undefined);
-        onChange(undefined);
-        setCoordinates('');
-        if (map) {
-            map.setDrawGeojson({
-                type: 'FeatureCollection',
-                features: []
-            });
-            map.enableDraw(currentDrawType); // Re-enable drawing when shape is cleared
-            setIsDrawing(true);
-        }
-    };
-    var handleDrawTypeChange = function (shapeType) {
-        if (map) {
-            // Clear existing shape if any
-            map.setDrawGeojson({
-                type: 'FeatureCollection',
-                features: []
-            });
-            setGeojson(undefined);
-            onChange(undefined);
-            setCoordinates('');
-            setShowShapeTypeButtons(false);
-            setCurrentDrawType(shapeType);
-            map.enableDraw(shapeType);
-            setIsDrawing(true);
-        }
-    };
     var shouldShowShapeButtons = function (coords) {
-        var validLines = coords.trim().split('\n')
-            .map(function (line) { return line.trim(); })
-            .filter(function (line) { return line.length > 0; })
-            .filter(function (line) {
-            try {
-                var _a = line.split(',').map(function (coord) { return parseFloat(coord.trim()); }), lat = _a[0], lon = _a[1];
-                return !isNaN(lat) && !isNaN(lon);
-            }
-            catch (_b) {
-                return false;
-            }
-        });
-        return validLines.length >= 3;
+        var validLinesCount = coords.trim().split('\n').filter(function (l) { return l.trim(); }).length;
+        return (drawPolygonEnabled || drawPathEnabled) && validLinesCount >= 2;
     };
-    var handleCoordinatesChange = function (e) {
-        var newCoords = e !== null && e !== void 0 ? e : '';
-        setCoordinates(newCoords);
-        setShowShapeTypeButtons(shouldShowShapeButtons(newCoords));
-        try {
-            var newGeoJSON = createGeoJSONFromCoordinates(newCoords);
-            if (newGeoJSON) {
-                setGeojson(newGeoJSON);
-                setError(undefined);
-                if (map) {
-                    map.setDrawGeojson({
-                        type: 'FeatureCollection',
-                        features: []
-                    });
-                    map.setDrawGeojson({ type: 'FeatureCollection', features: [newGeoJSON] });
-                    map.disableDraw(currentDrawType); // Disable drawing when coordinates are entered
-                }
-            }
-            else {
-                setGeojson(undefined);
-                onChange(undefined);
-                if (map) {
-                    map.setDrawGeojson({
-                        type: 'FeatureCollection',
-                        features: []
-                    });
-                }
-            }
-        }
-        catch (e) {
-            setError('Invalid coordinate format');
-        }
-    };
-    // Reload shape on the map
-    useEffect(function () {
-        if (map === undefined)
-            return;
-        if (geojson !== undefined && 'features' in geojson) {
-            map.setDrawGeojson({
-                type: 'FeatureCollection',
-                features: [geojson]
-            });
-            map.disableDraw(currentDrawType); // Disable drawing when there's a shape
-            setIsDrawing(false);
-            // Update coordinates display and shape type buttons
-            updateCoordinatesFromGeoJSON(geojson);
-            setShowShapeTypeButtons(shouldShowShapeButtons(coordinates));
-        }
-        else {
-            map.enableDraw(currentDrawType);
-            setIsDrawing(true);
-        }
-    }, [map, currentDrawType]);
+    var _o = useState(function () { return shouldShowShapeButtons(coordinates); }), showShapeTypeButtons = _o[0], setShowShapeTypeButtons = _o[1];
+    useEffect(function () { setShowShapeTypeButtons(shouldShowShapeButtons(coordinates)); }, [coordinates, drawPolygonEnabled, drawPathEnabled]); // Added effect to update buttons
+    // ---- Helper Functions ----
+    var hasValidShape = function (feature) { return !!(feature === null || feature === void 0 ? void 0 : feature.geometry); };
     var applyShapeType = function (shapeType) {
-        var newGeoJSON = createGeoJSONFromCoordinates(coordinates, shapeType);
-        if (newGeoJSON) {
-            setGeojson(newGeoJSON);
+        var newFeature = createGeoJSONFromCoordinates(coordinates, shapeType);
+        if (newFeature) {
+            setGeojson(newFeature);
             setError(undefined);
-            if (map) {
-                map.setDrawGeojson({
-                    type: 'FeatureCollection',
-                    features: []
-                });
-                map.setDrawGeojson({ type: 'FeatureCollection', features: [newGeoJSON] });
-            }
         }
-        // Don't hide the buttons anymore
-        // setShowShapeTypeButtons(false)
+        else if (!error) {
+            setError("Could not create ".concat(shapeType === EMapShape.polygon ? 'poly' : 'path', "."));
+        }
     };
-    return React__default.createElement("div", null,
+    // ---- JSX Return (Reverting Button ClassNames and removing disabled) ----
+    return (React__default.createElement("div", null,
         React__default.createElement(FieldLabel, __assign({}, field)),
         React__default.createElement("div", { className: "relative" },
             drawEnabled && (drawPolygonEnabled || drawPathEnabled || drawPointEnabled) && (React__default.createElement("div", { className: "absolute z-20 top-12 right-4 flex flex-col gap-2" },
-                drawPolygonEnabled && (React__default.createElement("div", { className: "tooltip-container relative group" },
-                    React__default.createElement(Button, { onClick: function () { handleDrawTypeChange(EMapShape.polygon); }, className: "p-2 rounded-lg shadow-lg ".concat(currentDrawType === EMapShape.polygon && isDrawing
+                drawPointEnabled && (React__default.createElement("div", { className: "tooltip-container relative group" },
+                    React__default.createElement(Button, { onClick: function () { handleDrawTypeChange(EMapShape.point); }, 
+                        // Reverted className logic
+                        className: "p-2 rounded-lg shadow-lg ".concat(currentDrawType === EMapShape.point && isDrawing
                             ? 'bg-white hover:bg-gray-50 ring-2 ring-yellow-200 shadow-[0_0_10px_rgba(253,224,71,0.5)]'
-                            : 'bg-gray-100 hover:bg-gray-50', " text-black w-10 h-10 flex items-center justify-center") },
-                        React__default.createElement(SquareIcon, { className: "w-5 h-5 rotate-45" }),
-                        React__default.createElement("span", { className: "tooltip absolute right-full mr-2 px-2 py-1 bg-gray-800 text-white text-sm rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none" }, "Draw Polygon")))),
+                            : 'bg-gray-100 hover:bg-gray-50', " text-black w-10 h-10 flex items-center justify-center"), "aria-label": "Draw Point" },
+                        React__default.createElement(DrawingPinFilledIcon, { className: "w-5 h-5" }),
+                        React__default.createElement("span", { className: "tooltip absolute right-full mr-2 px-2 py-1 bg-gray-800 text-white text-sm rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none" }, "Draw Point")))),
                 drawPathEnabled && (React__default.createElement("div", { className: "tooltip-container relative group" },
-                    React__default.createElement(Button, { onClick: function () { handleDrawTypeChange(EMapShape.linestring); }, className: "p-2 rounded-lg shadow-lg ".concat(currentDrawType === EMapShape.linestring && isDrawing
+                    React__default.createElement(Button, { onClick: function () { handleDrawTypeChange(EMapShape.linestring); }, 
+                        // Reverted className logic
+                        className: "p-2 rounded-lg shadow-lg ".concat(currentDrawType === EMapShape.linestring && isDrawing
                             ? 'bg-white hover:bg-gray-50 ring-2 ring-yellow-200 shadow-[0_0_10px_rgba(253,224,71,0.5)]'
-                            : 'bg-gray-100 hover:bg-gray-50', " text-black w-10 h-10 flex items-center justify-center") },
+                            : 'bg-gray-100 hover:bg-gray-50', " text-black w-10 h-10 flex items-center justify-center"), "aria-label": "Draw Path" },
                         React__default.createElement(BorderSolidIcon, { className: "w-5 h-5" }),
                         React__default.createElement("span", { className: "tooltip absolute right-full mr-2 px-2 py-1 bg-gray-800 text-white text-sm rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none" }, "Draw Path")))),
-                drawPointEnabled && (React__default.createElement("div", { className: "tooltip-container relative group" },
-                    React__default.createElement(Button, { onClick: function () { handleDrawTypeChange(EMapShape.point); }, className: "p-2 rounded-lg shadow-lg ".concat(currentDrawType === EMapShape.point && isDrawing
+                drawPolygonEnabled && (React__default.createElement("div", { className: "tooltip-container relative group" },
+                    React__default.createElement(Button, { onClick: function () { handleDrawTypeChange(EMapShape.polygon); }, 
+                        // Reverted className logic
+                        className: "p-2 rounded-lg shadow-lg ".concat(currentDrawType === EMapShape.polygon && isDrawing
                             ? 'bg-white hover:bg-gray-50 ring-2 ring-yellow-200 shadow-[0_0_10px_rgba(253,224,71,0.5)]'
-                            : 'bg-gray-100 hover:bg-gray-50', " text-black w-10 h-10 flex items-center justify-center") },
-                        React__default.createElement(DrawingPinFilledIcon, { className: "w-5 h-5" }),
-                        React__default.createElement("span", { className: "tooltip absolute right-full mr-2 px-2 py-1 bg-gray-800 text-white text-sm rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none" }, "Draw Point")))),
+                            : 'bg-gray-100 hover:bg-gray-50', " text-black w-10 h-10 flex items-center justify-center"), "aria-label": "Draw Polygon" },
+                        React__default.createElement(SquareIcon, { className: "w-5 h-5 rotate-45" }),
+                        React__default.createElement("span", { className: "tooltip absolute right-full mr-2 px-2 py-1 bg-gray-800 text-white text-sm rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none" }, "Draw Polygon")))),
                 hasValidShape(geojson) && (React__default.createElement("div", { className: "tooltip-container relative group" },
-                    React__default.createElement(Button, { onClick: clearShape, className: "p-2 rounded-lg shadow-lg bg-red-500 hover:bg-red-600 text-white w-10 h-10 flex items-center justify-center" },
+                    React__default.createElement(Button, { onClick: clearShape, className: "p-2 rounded-lg shadow-lg bg-red-500 hover:bg-red-600 text-white w-10 h-10 flex items-center justify-center", "aria-label": "Clear Shape" },
                         React__default.createElement(TrashIcon, { className: "w-5 h-5" }),
                         React__default.createElement("span", { className: "tooltip absolute right-full mr-2 px-2 py-1 bg-gray-800 text-white text-sm rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none" }, "Clear Shape")))))),
             React__default.createElement(OpenLayersMapComponent, __assign({}, MAP_CONFIG, { setState: setMapState })),
             showCoordinateInput && (React__default.createElement("div", { className: "mt-4" },
-                React__default.createElement("div", { className: "flex justify-between items-center mb-2" },
-                    React__default.createElement("span", null,
-                        "Draw on map or enter coordinates ",
-                        React__default.createElement("pre", { className: "inline-block text-sm" }, "(latitude, longitude)")),
-                    drawEnabled && showShapeTypeButtons && (React__default.createElement("div", { className: "flex gap-2" },
-                        drawPathEnabled && (React__default.createElement(Button, { onClick: function () { applyShapeType(EMapShape.linestring); }, className: "px-4 py-1 bg-white hover:bg-gray-50 text-black rounded-lg shadow-sm border border-gray-200 text-sm flex items-center gap-2" },
-                            React__default.createElement(BorderSolidIcon, { className: "w-4 h-4" }),
-                            "Create Path")),
-                        drawPolygonEnabled && (React__default.createElement(Button, { onClick: function () { applyShapeType(EMapShape.polygon); }, className: "px-4 py-1 bg-white hover:bg-gray-50 text-black rounded-lg shadow-sm border border-gray-200 text-sm flex items-center gap-2" },
-                            React__default.createElement(SquareIcon, { className: "w-4 h-4 rotate-45" }),
-                            "Create Polygon"))))),
-                React__default.createElement(TextArea, { error: error, className: 'min-h-[100px] bg-slate-50 rounded-lg shadow-inner', id: "".concat(field.id, "-coordinates"), testId: "".concat(field.id, "-coordinates"), value: coordinates, onChange: handleCoordinatesChange, placeholder: "61.2181, -149.9003\n61.2182, -149.9004\n61.2183, -149.9005" }))),
-            showGeoJSONInput && React__default.createElement(TextArea, { error: error, className: 'min-h-[500px] bg-slate-50 rounded-lg shadow-inner', id: field.id, testId: field.id, label: React__default.createElement(FieldLabel, __assign({}, field)), value: getValue(), onChange: function (e) {
-                    try {
-                        JSON.parse(e !== null && e !== void 0 ? e : '');
-                        onChange(JSON.parse(e !== null && e !== void 0 ? e : ''));
-                        setError(undefined);
-                    }
-                    catch (e) {
-                        setError('Invalid JSON');
-                    }
-                } })));
+                React__default.createElement("div", { className: "flex justify-between items-center mb-2 flex-wrap gap-y-2" },
+                    React__default.createElement("span", { className: "text-sm" },
+                        " ",
+                        " "),
+                    showShapeTypeButtons && (drawPathEnabled || drawPolygonEnabled) && (React__default.createElement("div", { className: "flex gap-2" },
+                        " ",
+                        drawPathEnabled && React__default.createElement(Button, { onClick: function () { applyShapeType(EMapShape.linestring); }, className: "px-3 py-1 bg-white hover:bg-gray-50 text-black rounded-lg shadow-sm border border-gray-200 text-xs flex items-center gap-1" },
+                            React__default.createElement(BorderSolidIcon, { className: "w-3 h-3" }),
+                            "Create Path"),
+                        drawPolygonEnabled && React__default.createElement(Button, { onClick: function () { applyShapeType(EMapShape.polygon); }, className: "px-3 py-1 bg-white hover:bg-gray-50 text-black rounded-lg shadow-sm border border-gray-200 text-xs flex items-center gap-1" },
+                            React__default.createElement(SquareIcon, { className: "w-3 h-3 rotate-45" }),
+                            "Create Polygon")))),
+                React__default.createElement(TextArea, { error: error, className: 'min-h-[100px] bg-slate-50 rounded-lg shadow-inner font-mono text-sm', id: "".concat(field.id, "-coordinates"), testId: "".concat(field.id, "-coordinates"), value: coordinates, onChange: handleCoordinatesChange, placeholder: '...', "aria-label": "Coordinates Input" }),
+                error && React__default.createElement("p", { className: "text-red-600 text-xs mt-1" }, error))),
+            showGeoJSONInput && (React__default.createElement(TextArea, { error: error, className: '...', id: field.id + '-debug', testId: field.id + '-debug', label: React__default.createElement(FieldLabel, __assign({}, field, { label: "Debug GeoJSON Feature State" })), value: geojson ? JSON.stringify(geojson, null, 2) : '', disabled: true })))));
 };
 
-export { GeoJSONInput, GeoJSONInput as default };
+export { GeometryInput, GeometryInput as default };
 //# sourceMappingURL=Geometry.js.map