@biodiv-platform/naksha-maplibre-draw 5.0.9 → 5.0.11

package/dist/esm/index.js

@@ -1,783 +1 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-
-// src/components/map.tsx
-import maplibregl2 from "maplibre-gl";
-import { useRef, useState as useState2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
-
-// src/components/setup-draw.tsx
-import {
-  TerraDraw,
-  TerraDrawSelectMode,
-  TerraDrawPointMode,
-  TerraDrawLineStringMode,
-  TerraDrawPolygonMode,
-  TerraDrawCircleMode,
-  TerraDrawFreehandMode,
-  ValidateNotSelfIntersecting,
-  TerraDrawRectangleMode
-} from "terra-draw";
-import { TerraDrawMapLibreGLAdapter } from "terra-draw-maplibre-gl-adapter";
-import { tw } from "twind";
-import React from "react";
-import { jsx } from "react/jsx-runtime";
-function setupDraw(map) {
-  return new TerraDraw({
-    tracked: true,
-    adapter: new TerraDrawMapLibreGLAdapter({
-      map,
-      coordinatePrecision: 9
-    }),
-    modes: [
-      new TerraDrawSelectMode({
-        flags: {
-          polygon: {
-            feature: {
-              scaleable: true,
-              rotateable: true,
-              draggable: true,
-              coordinates: {
-                midpoints: true,
-                draggable: true,
-                deletable: true
-              }
-            }
-          },
-          linestring: {
-            feature: {
-              draggable: true,
-              coordinates: {
-                midpoints: true,
-                draggable: true,
-                deletable: true
-              }
-            }
-          },
-          circle: {
-            feature: {
-              draggable: true
-            }
-          },
-          point: {
-            feature: {
-              draggable: true
-            }
-          },
-          rectangle: {
-            feature: {
-              draggable: true,
-              coordinates: {
-                resizable: "opposite"
-              }
-            }
-          },
-          freehand: {
-            feature: {
-              draggable: true
-            }
-          }
-        }
-      }),
-      new TerraDrawPointMode(),
-      new TerraDrawLineStringMode({
-        validation: (feature, { updateType }) => {
-          if (updateType === "finish" || updateType === "commit") {
-            return ValidateNotSelfIntersecting(feature);
-          }
-          return {
-            valid: true
-          };
-        }
-      }),
-      new TerraDrawRectangleMode(),
-      new TerraDrawPolygonMode({
-        pointerDistance: 30,
-        validation: (feature, { updateType }) => {
-          if (updateType === "finish" || updateType === "commit") {
-            return ValidateNotSelfIntersecting(feature);
-          }
-          return {
-            valid: true
-          };
-        }
-      }),
-      new TerraDrawCircleMode(),
-      new TerraDrawFreehandMode({
-        pointerDistance: 5,
-        validation: (feature) => {
-          return ValidateNotSelfIntersecting(feature);
-        }
-      })
-    ]
-  });
-}
-var ensureModeProperty = (features) => {
-  return features.map((feature) => {
-    var _a, _b;
-    if ((_a = feature.properties) == null ? void 0 : _a.mode)
-      return feature;
-    const type = (_b = feature.geometry) == null ? void 0 : _b.type;
-    const mode = type === "Point" ? "point" : type === "Polygon" ? "polygon" : type === "LineString" ? "linestring" : "unknown";
-    return __spreadProps(__spreadValues({}, feature), {
-      properties: __spreadProps(__spreadValues({}, feature.properties), { mode })
-    });
-  });
-};
-var IconButton = React.forwardRef(
-  (props, ref) => /* @__PURE__ */ jsx("button", __spreadValues({
-    ref,
-    type: "button",
-    className: tw`h-8 px-3 py-2 rounded-md focus:outline-none  cursor-pointer text-md flex align-middle items-center gap-2 bg-gray-100 hover:bg-gray-200 text-gray-700 disabled:cursor-not-allowed disabled:bg-gray-100! disabled:opacity-50`
-  }, props))
-);
-var MapStyleSwitcher = ({
-  currentStyleIdx,
-  onStyleChange,
-  mapStyles
-}) => /* @__PURE__ */ jsx("div", {
-  style: {
-    position: "absolute",
-    left: 12,
-    bottom: 12,
-    background: "rgba(255,255,255,0.95)",
-    padding: "8px",
-    borderRadius: "6px",
-    zIndex: 1e3,
-    boxShadow: "0 2px 4px rgba(0,0,0,0.2)"
-  },
-  children: /* @__PURE__ */ jsx("select", {
-    value: currentStyleIdx,
-    onChange: (e) => onStyleChange(Number(e.target.value)),
-    style: { fontSize: 14, padding: "4px" },
-    children: mapStyles.map((style, idx) => /* @__PURE__ */ jsx("option", {
-      value: idx,
-      children: style.text || `Style ${idx + 1}`
-    }, style.key || idx))
-  })
-});
-
-// src/components/setup-maplibre.tsx
-import maplibregl from "maplibre-gl";
-function setupMaplibreMap({
-  containerId,
-  latitude = 0,
-  longitude = 0,
-  zoom,
-  pitch,
-  bearing,
-  mapstyle
-}) {
-  if (maplibregl.getRTLTextPluginStatus() === "unavailable") {
-    maplibregl.setRTLTextPlugin(
-      "https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js",
-      true
-    );
-  }
-  return new maplibregl.Map({
-    container: containerId,
-    style: mapstyle,
-    center: { lat: latitude, lng: longitude },
-    zoom,
-    pitch,
-    bearing
-  });
-}
-
-// src/components/map-buttons/map-buttons.tsx
-import { useEffect, useState, useCallback, useMemo } from "react";
-
-// src/components/icon-buttons/icons.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var PencilOpenIcon = () => /* @__PURE__ */ jsxs("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: "1.5",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  children: [
-    /* @__PURE__ */ jsx2("path", {
-      d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
-    }),
-    /* @__PURE__ */ jsx2("path", {
-      d: "m15 5 4 4"
-    })
-  ]
-});
-var PencilCloseIcon = () => /* @__PURE__ */ jsxs("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: "1.5",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  children: [
-    /* @__PURE__ */ jsx2("path", {
-      d: "m10 10-6.157 6.162a2 2 0 0 0-.5.833l-1.322 4.36a.5.5 0 0 0 .622.624l4.358-1.323a2 2 0 0 0 .83-.5L14 13.982"
-    }),
-    /* @__PURE__ */ jsx2("path", {
-      d: "m12.829 7.172 4.359-4.346a1 1 0 1 1 3.986 3.986l-4.353 4.353"
-    }),
-    /* @__PURE__ */ jsx2("path", {
-      d: "m15 5 4 4"
-    }),
-    /* @__PURE__ */ jsx2("path", {
-      d: "m2 2 20 20"
-    })
-  ]
-});
-var LocateIcon = () => /* @__PURE__ */ jsxs("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: "1.5",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  children: [
-    /* @__PURE__ */ jsx2("line", {
-      x1: "2",
-      x2: "5",
-      y1: "12",
-      y2: "12"
-    }),
-    /* @__PURE__ */ jsx2("line", {
-      x1: "19",
-      x2: "22",
-      y1: "12",
-      y2: "12"
-    }),
-    /* @__PURE__ */ jsx2("line", {
-      x1: "12",
-      x2: "12",
-      y1: "2",
-      y2: "5"
-    }),
-    /* @__PURE__ */ jsx2("line", {
-      x1: "12",
-      x2: "12",
-      y1: "19",
-      y2: "22"
-    }),
-    /* @__PURE__ */ jsx2("circle", {
-      cx: "12",
-      cy: "12",
-      r: "7"
-    })
-  ]
-});
-var SelectIcon = () => /* @__PURE__ */ jsxs("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: "1.5",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  children: [
-    /* @__PURE__ */ jsx2("path", {
-      d: "M12.586 12.586 19 19"
-    }),
-    /* @__PURE__ */ jsx2("path", {
-      d: "M3.688 3.037a.497.497 0 0 0-.651.651l6.5 15.999a.501.501 0 0 0 .947-.062l1.569-6.083a2 2 0 0 1 1.448-1.479l6.124-1.579a.5.5 0 0 0 .063-.947z"
-    })
-  ]
-});
-var PointIcon = () => /* @__PURE__ */ jsxs("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: "1.5",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  children: [
-    /* @__PURE__ */ jsx2("path", {
-      d: "M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
-    }),
-    /* @__PURE__ */ jsx2("circle", {
-      cx: "12",
-      cy: "10",
-      r: "3"
-    })
-  ]
-});
-var LineIcon = () => /* @__PURE__ */ jsx2("svg", {
-  width: "16",
-  height: "16",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: "2",
-  children: /* @__PURE__ */ jsx2("line", {
-    x1: "4",
-    y1: "20",
-    x2: "20",
-    y2: "4"
-  })
-});
-var PolygonIcon = () => /* @__PURE__ */ jsx2("svg", {
-  width: "16",
-  height: "16",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: "2",
-  children: /* @__PURE__ */ jsx2("polygon", {
-    points: "12,2 22,8 18,22 6,22 2,8"
-  })
-});
-var RectangleIcon = () => /* @__PURE__ */ jsx2("svg", {
-  width: "16",
-  height: "16",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: "2",
-  children: /* @__PURE__ */ jsx2("rect", {
-    x: "4",
-    y: "4",
-    width: "16",
-    height: "16"
-  })
-});
-var CircleIcon = () => /* @__PURE__ */ jsx2("svg", {
-  width: "16",
-  height: "16",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: "2",
-  children: /* @__PURE__ */ jsx2("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  })
-});
-var FreeHandIcon = () => /* @__PURE__ */ jsx2("svg", {
-  width: "16",
-  height: "16",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: "2",
-  children: /* @__PURE__ */ jsx2("path", {
-    d: "M3 16c1-3 4-5 7-4 3 1 5 3 7 2 2-1 3-4 1-6-1-2-4-2-6-1"
-  })
-});
-var DeleteIcon = () => /* @__PURE__ */ jsx2("svg", {
-  width: "16",
-  height: "16",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: "2",
-  children: /* @__PURE__ */ jsx2("path", {
-    d: "M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
-  })
-});
-
-// src/components/map-button/map-button.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var BUTTON_STYLE = {
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  width: 30,
-  height: 30,
-  padding: 0,
-  borderRadius: 4
-};
-var MapButton = ({
-  mode,
-  currentMode,
-  onClick,
-  icon,
-  tooltip,
-  disabled
-}) => /* @__PURE__ */ jsx3(IconButton, {
-  type: "button",
-  title: tooltip,
-  disabled,
-  onClick: () => !disabled && onClick(mode != null ? mode : ""),
-  style: __spreadProps(__spreadValues({}, BUTTON_STYLE), {
-    backgroundColor: disabled ? "#d3d3d3" : currentMode === mode ? "#02cf87" : "#f0f0f0",
-    cursor: disabled ? "not-allowed" : "pointer",
-    opacity: disabled ? 0.6 : 1
-  }),
-  children: icon
-});
-var map_button_default = MapButton;
-
-// src/components/map-buttons/map-buttons.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-function MapButtons({
-  mode,
-  setMode,
-  onClick,
-  draw,
-  onFeaturesChange,
-  isMultiple = true,
-  autoFocus
-}) {
-  const [expanded, setExpanded] = useState(false);
-  const [hasFeatures, setHasFeatures] = useState(false);
-  const updateHasFeatures = useCallback(
-    () => setHasFeatures(draw.getSnapshot().length > 0),
-    [draw]
-  );
-  useEffect(() => {
-    if (!draw)
-      return;
-    draw.on("finish", updateHasFeatures);
-    draw.on("change", updateHasFeatures);
-    updateHasFeatures();
-    return () => {
-      draw.off("finish", updateHasFeatures);
-      draw.off("change", updateHasFeatures);
-    };
-  }, [draw, updateHasFeatures]);
-  const handleGeolocation = useCallback(() => {
-    if (!("geolocation" in navigator)) {
-      alert("Geolocation is not supported in this browser.");
-      return;
-    }
-    navigator.geolocation.getCurrentPosition(
-      (pos) => {
-        const coords = [
-          pos.coords.longitude,
-          pos.coords.latitude
-        ];
-        const pt = {
-          type: "Feature",
-          geometry: { type: "Point", coordinates: coords },
-          properties: { mode: "point", source: "geolocation" }
-        };
-        if (!isMultiple)
-          draw.clear();
-        draw.addFeatures([pt]);
-        onFeaturesChange == null ? void 0 : onFeaturesChange(draw.getSnapshot());
-        autoFocus == null ? void 0 : autoFocus([pt]);
-      },
-      (error) => {
-        alert("Error getting geolocation");
-        console.error(error);
-      }
-    );
-    setMode("current-location");
-  }, [draw, isMultiple, onFeaturesChange, autoFocus]);
-  const handleClear = useCallback(() => {
-    draw.clear();
-    setHasFeatures(false);
-    setMode("static");
-    onFeaturesChange == null ? void 0 : onFeaturesChange([]);
-  }, [draw, onFeaturesChange]);
-  const buttons = useMemo(
-    () => [
-      {
-        icon: /* @__PURE__ */ jsx4(LocateIcon, {}),
-        mode: "current-location",
-        onClick: handleGeolocation,
-        tooltip: "Use current location"
-      },
-      {
-        icon: /* @__PURE__ */ jsx4(SelectIcon, {}),
-        mode: "select",
-        onClick,
-        tooltip: "Select"
-      },
-      {
-        icon: /* @__PURE__ */ jsx4(PointIcon, {}),
-        mode: "point",
-        onClick,
-        tooltip: "Point"
-      },
-      {
-        icon: /* @__PURE__ */ jsx4(LineIcon, {}),
-        mode: "linestring",
-        onClick,
-        tooltip: "Linestring"
-      },
-      {
-        icon: /* @__PURE__ */ jsx4(PolygonIcon, {}),
-        mode: "polygon",
-        onClick,
-        tooltip: "Polygon"
-      },
-      {
-        icon: /* @__PURE__ */ jsx4(RectangleIcon, {}),
-        mode: "rectangle",
-        onClick,
-        tooltip: "Reactangle"
-      },
-      {
-        icon: /* @__PURE__ */ jsx4(CircleIcon, {}),
-        mode: "circle",
-        onClick,
-        tooltip: "Circle"
-      },
-      {
-        icon: /* @__PURE__ */ jsx4(FreeHandIcon, {}),
-        mode: "freehand",
-        onClick,
-        tooltip: "Freehand"
-      },
-      {
-        icon: /* @__PURE__ */ jsx4(DeleteIcon, {}),
-        mode: "clear",
-        onClick: handleClear,
-        tooltip: "Clear all features",
-        disabled: !hasFeatures
-      }
-    ],
-    [onClick, handleGeolocation, handleClear, hasFeatures]
-  );
-  return /* @__PURE__ */ jsxs2("div", {
-    style: {
-      position: "absolute",
-      top: 10,
-      left: 10,
-      display: "flex",
-      flexDirection: "column",
-      gap: 6,
-      zIndex: 1e3,
-      backgroundColor: "rgba(255,255,255,0.9)",
-      padding: 8,
-      borderRadius: 6,
-      boxShadow: "0 2px 6px rgba(0,0,0,0.2)"
-    },
-    children: [
-      /* @__PURE__ */ jsx4(IconButton, {
-        onClick: () => setExpanded((v) => !v),
-        style: {
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          width: 30,
-          height: 30,
-          padding: 0,
-          borderRadius: 4,
-          backgroundColor: "#d3d3d3"
-        },
-        title: "Expand or collapse tools",
-        children: expanded ? /* @__PURE__ */ jsx4(PencilCloseIcon, {}) : /* @__PURE__ */ jsx4(PencilOpenIcon, {})
-      }),
-      expanded && /* @__PURE__ */ jsx4("div", {
-        style: { display: "flex", flexDirection: "column", gap: 6 },
-        children: buttons.map((btn, i) => /* @__PURE__ */ jsx4(map_button_default, {
-          icon: btn.icon,
-          mode: btn.mode,
-          currentMode: mode,
-          onClick: btn.onClick,
-          tooltip: btn.tooltip,
-          disabled: btn.disabled
-        }, i))
-      })
-    ]
-  });
-}
-var map_buttons_default = MapButtons;
-
-// src/components/map.tsx
-import bbox from "@turf/bbox";
-import { defaultMapStyles } from "@biodiv-platform/naksha-commons";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var Map = (props) => {
-  var _a;
-  const mapRef = useRef(null);
-  const [map, setMap] = useState2();
-  const [mode, setMode] = useState2("static");
-  const [draw, setDraw] = useState2();
-  const drawRef = useRef();
-  const { isMultiple, features = [], onFeaturesChange } = props;
-  const [selectedMapStyleIdx, setSelectedMapStyleIdx] = useState2(
-    (props == null ? void 0 : props.mapStyle) || 0
-  );
-  const mapTile = props.mapStyles ? props.mapStyles : defaultMapStyles;
-  const mapStyle = (_a = mapTile[selectedMapStyleIdx]) == null ? void 0 : _a.style;
-  const mapStyleConfig = mapTile[selectedMapStyleIdx];
-  const storedFeaturesRef = useRef([]);
-  const autoFocus = useCallback2(
-    (features2) => {
-      if (!(features2 == null ? void 0 : features2.length) || !map)
-        return;
-      const _bbox = bbox({ type: "FeatureCollection", features: features2 });
-      map.fitBounds(_bbox, {
-        padding: 40,
-        duration: 1e3,
-        maxZoom: 15
-      });
-    },
-    [map]
-  );
-  useEffect2(() => {
-    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-    if (features && features.length > 0) {
-      storedFeaturesRef.current = ensureModeProperty(features);
-    }
-    const maplibreMap = setupMaplibreMap({
-      containerId: "maplibre-map",
-      latitude: (_b = (_a2 = props.defaultViewState) == null ? void 0 : _a2.latitude) != null ? _b : 0,
-      longitude: (_d = (_c = props.defaultViewState) == null ? void 0 : _c.longitude) != null ? _d : 0,
-      zoom: (_f = (_e = props.defaultViewState) == null ? void 0 : _e.zoom) != null ? _f : 0,
-      pitch: (_h = (_g = props.defaultViewState) == null ? void 0 : _g.pitch) != null ? _h : 0,
-      bearing: (_j = (_i = props.defaultViewState) == null ? void 0 : _i.bearing) != null ? _j : 0,
-      mapstyle: mapStyle
-    });
-    if ("maxZoom" in mapStyleConfig && mapStyleConfig.maxZoom) {
-      maplibreMap.setMaxZoom(mapStyleConfig.maxZoom);
-    }
-    const navControl = new maplibregl2.NavigationControl({
-      showCompass: true,
-      showZoom: true,
-      visualizePitch: true
-    });
-    const fullscreen = new maplibregl2.FullscreenControl({});
-    maplibreMap.addControl(navControl, "bottom-right");
-    maplibreMap.addControl(fullscreen, "bottom-right");
-    maplibreMap.once("style.load", () => {
-      setMap(maplibreMap);
-    });
-    return () => {
-      if (drawRef.current) {
-        storedFeaturesRef.current = drawRef.current.getSnapshot();
-      }
-      if (drawRef.current) {
-        try {
-          drawRef.current.stop();
-        } catch (e) {
-          console.warn("terraDraw stop failed", e);
-        }
-        drawRef.current = void 0;
-        setDraw(void 0);
-      }
-      if (maplibreMap) {
-        maplibreMap.removeControl(navControl);
-        maplibreMap.removeControl(fullscreen);
-        maplibreMap.remove();
-      }
-    };
-  }, [mapStyle]);
-  const filterUserFeatures = (features2) => features2.filter(
-    (f) => f.geometry.type !== "Point" || f.properties.mode !== "static" && f.properties.mode !== "select"
-  );
-  useEffect2(() => {
-    if (!map)
-      return;
-    const terraDraw = setupDraw(map);
-    terraDraw.start();
-    drawRef.current = terraDraw;
-    setDraw(terraDraw);
-    const handleChange = () => {
-      let snapshot = terraDraw.getSnapshot();
-      let userFeatures = filterUserFeatures(snapshot);
-      if (!isMultiple && userFeatures.length > 1) {
-        const lastFeature = userFeatures.at(-1);
-        const toRemove = userFeatures.slice(0, -1).map((f) => f.id).filter((id) => Boolean(id));
-        if (toRemove.length > 0) {
-          try {
-            terraDraw.removeFeatures(toRemove);
-          } catch (e) {
-            console.warn("removeFeatures failed", e);
-          }
-        }
-        userFeatures = [lastFeature];
-      }
-      onFeaturesChange == null ? void 0 : onFeaturesChange(userFeatures);
-      autoFocus(userFeatures);
-    };
-    terraDraw.on("finish", handleChange);
-    setTimeout(() => {
-      if (terraDraw.getSnapshot().length === 0) {
-        let featuresToAdd = [];
-        if (storedFeaturesRef.current.length > 0) {
-          featuresToAdd = storedFeaturesRef.current;
-        } else if (features && features.length > 0) {
-          featuresToAdd = ensureModeProperty(features);
-        }
-        if (!isMultiple && featuresToAdd.length > 1) {
-          featuresToAdd = [featuresToAdd.at(-1)];
-        }
-        if (featuresToAdd.length > 0) {
-          terraDraw.addFeatures(featuresToAdd);
-          autoFocus(featuresToAdd);
-        }
-      }
-    }, 100);
-    return () => {
-      terraDraw.off("finish", handleChange);
-    };
-  }, [map]);
-  const changeMode = useCallback2(
-    (newMode) => {
-      draw == null ? void 0 : draw.setMode(newMode);
-      setMode(newMode);
-    },
-    [draw]
-  );
-  const handleStyleChange = (idx) => {
-    if (drawRef.current) {
-      storedFeaturesRef.current = drawRef.current.getSnapshot();
-    }
-    setSelectedMapStyleIdx(idx);
-    setMode("static");
-  };
-  return /* @__PURE__ */ jsxs3("div", {
-    ref: mapRef,
-    id: "maplibre-map",
-    style: { width: "100%", height: "100%", position: "relative" },
-    children: [
-      /* @__PURE__ */ jsx5(MapStyleSwitcher, {
-        currentStyleIdx: selectedMapStyleIdx,
-        onStyleChange: handleStyleChange,
-        mapStyles: mapTile
-      }),
-      draw && /* @__PURE__ */ jsx5(map_buttons_default, {
-        mode,
-        setMode,
-        onClick: changeMode,
-        draw,
-        onFeaturesChange,
-        isMultiple,
-        autoFocus
-      })
-    ]
-  });
-};
-var map_default = Map;
-
-// src/index.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var NakshaMaplibreDraw = (props) => /* @__PURE__ */ jsx6(map_default, __spreadValues({}, props));
-export {
-  NakshaMaplibreDraw
-};
+var we=Object.defineProperty,xe=Object.defineProperties;var ye=Object.getOwnPropertyDescriptors;var A=Object.getOwnPropertySymbols;var be=Object.prototype.hasOwnProperty,ve=Object.prototype.propertyIsEnumerable;var Y=(t,o,e)=>o in t?we(t,o,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[o]=e,w=(t,o)=>{for(var e in o||(o={}))be.call(o,e)&&Y(t,e,o[e]);if(A)for(var e of A(o))ve.call(o,e)&&Y(t,e,o[e]);return t},I=(t,o)=>xe(t,ye(o));import{FullscreenControl as Ze,NavigationControl as Ue}from"maplibre-gl";import{useRef as J,useState as T,useEffect as pe,useCallback as ue}from"react";import{TerraDraw as Se,TerraDrawSelectMode as Me,TerraDrawPointMode as ke,TerraDrawLineStringMode as Ce,TerraDrawPolygonMode as Ie,TerraDrawCircleMode as Pe,TerraDrawFreehandMode as Be,ValidateNotSelfIntersecting as F,TerraDrawRectangleMode as De}from"terra-draw";import{TerraDrawMapLibreGLAdapter as Le}from"terra-draw-maplibre-gl-adapter";import{tw as Ne}from"twind";import Te from"react";import{jsx as L}from"react/jsx-runtime";function _(t){return new Se({tracked:!0,adapter:new Le({map:t,coordinatePrecision:9}),modes:[new Me({flags:{polygon:{feature:{scaleable:!0,rotateable:!0,draggable:!0,coordinates:{midpoints:!0,draggable:!0,deletable:!0}}},linestring:{feature:{draggable:!0,coordinates:{midpoints:!0,draggable:!0,deletable:!0}}},circle:{feature:{draggable:!0}},point:{feature:{draggable:!0}},rectangle:{feature:{draggable:!0,coordinates:{resizable:"opposite"}}},freehand:{feature:{draggable:!0}}}}),new ke,new Ce({validation:(o,{updateType:e})=>e==="finish"||e==="commit"?F(o):{valid:!0}}),new De,new Ie({pointerDistance:30,validation:(o,{updateType:e})=>e==="finish"||e==="commit"?F(o):{valid:!0}}),new Pe,new Be({pointerDistance:5,validation:o=>F(o)})]})}var G=t=>t.map(o=>{var a,l;if((a=o.properties)!=null&&a.mode)return o;let e=(l=o.geometry)==null?void 0:l.type,n=e==="Point"?"point":e==="Polygon"?"polygon":e==="LineString"?"linestring":"unknown";return I(w({},o),{properties:I(w({},o.properties),{mode:n})})});var N=Te.forwardRef((t,o)=>L("button",w({ref:o,type:"button",className:Ne`h-8 px-3 py-2 rounded-md focus:outline-none  cursor-pointer text-md flex align-middle items-center gap-2 bg-gray-100 hover:bg-gray-200 text-gray-700 disabled:cursor-not-allowed disabled:bg-gray-100! disabled:opacity-50`},t))),$=({currentStyleIdx:t,onStyleChange:o,mapStyles:e})=>L("div",{style:{position:"absolute",left:12,bottom:12,background:"rgba(255,255,255,0.95)",padding:"8px",borderRadius:"6px",zIndex:1e3,boxShadow:"0 2px 4px rgba(0,0,0,0.2)"},children:L("select",{value:t,onChange:n=>o(Number(n.target.value)),style:{fontSize:14,padding:"4px"},children:e.map((n,a)=>L("option",{value:a,children:n.text||`Style ${a+1}`},n.key||a))})});import{getRTLTextPluginStatus as Re,Map as Fe,setRTLTextPlugin as Ge}from"maplibre-gl";function q({containerId:t,latitude:o=0,longitude:e=0,zoom:n,pitch:a,bearing:l,mapstyle:d}){return Re()==="unavailable"&&Ge("https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js",!0),new Fe({container:t,style:d,center:{lat:o,lng:e},zoom:n,pitch:a,bearing:l})}import{useEffect as We,useState as ce,useCallback as O,useMemo as ze}from"react";import{jsx as i,jsxs as P}from"react/jsx-runtime";var K=()=>P("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[i("path",{d:"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"}),i("path",{d:"m15 5 4 4"})]}),Q=()=>P("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[i("path",{d:"m10 10-6.157 6.162a2 2 0 0 0-.5.833l-1.322 4.36a.5.5 0 0 0 .622.624l4.358-1.323a2 2 0 0 0 .83-.5L14 13.982"}),i("path",{d:"m12.829 7.172 4.359-4.346a1 1 0 1 1 3.986 3.986l-4.353 4.353"}),i("path",{d:"m15 5 4 4"}),i("path",{d:"m2 2 20 20"})]}),X=()=>P("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[i("line",{x1:"2",x2:"5",y1:"12",y2:"12"}),i("line",{x1:"19",x2:"22",y1:"12",y2:"12"}),i("line",{x1:"12",x2:"12",y1:"2",y2:"5"}),i("line",{x1:"12",x2:"12",y1:"19",y2:"22"}),i("circle",{cx:"12",cy:"12",r:"7"})]}),ee=()=>P("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[i("path",{d:"M12.586 12.586 19 19"}),i("path",{d:"M3.688 3.037a.497.497 0 0 0-.651.651l6.5 15.999a.501.501 0 0 0 .947-.062l1.569-6.083a2 2 0 0 1 1.448-1.479l6.124-1.579a.5.5 0 0 0 .063-.947z"})]}),te=()=>P("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[i("path",{d:"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"}),i("circle",{cx:"12",cy:"10",r:"3"})]}),oe=()=>i("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:i("line",{x1:"4",y1:"20",x2:"20",y2:"4"})}),re=()=>i("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:i("polygon",{points:"12,2 22,8 18,22 6,22 2,8"})}),ne=()=>i("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:i("rect",{x:"4",y:"4",width:"16",height:"16"})}),ie=()=>i("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:i("circle",{cx:"12",cy:"12",r:"10"})}),ae=()=>i("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:i("path",{d:"M3 16c1-3 4-5 7-4 3 1 5 3 7 2 2-1 3-4 1-6-1-2-4-2-6-1"})}),le=()=>i("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:i("path",{d:"M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"})});import{jsx as Ve}from"react/jsx-runtime";var Oe={display:"flex",justifyContent:"center",alignItems:"center",width:30,height:30,padding:0,borderRadius:4},Je=({mode:t,currentMode:o,onClick:e,icon:n,tooltip:a,disabled:l})=>Ve(N,{type:"button",title:a,disabled:l,onClick:()=>!l&&e(t!=null?t:""),style:I(w({},Oe),{backgroundColor:l?"#d3d3d3":o===t?"#02cf87":"#f0f0f0",cursor:l?"not-allowed":"pointer",opacity:l?.6:1,width:40,height:40}),children:n}),se=Je;import{jsx as c,jsxs as He}from"react/jsx-runtime";function Ee({mode:t,setMode:o,onClick:e,draw:n,onFeaturesChange:a,isMultiple:l=!0,autoFocus:d}){let[M,m]=ce(!1),[b,x]=ce(!1),u=O(()=>x(n.getSnapshot().length>0),[n]);We(()=>{if(!!n)return n.on("finish",u),n.on("change",u),u(),()=>{n.off("finish",u),n.off("change",u)}},[n,u]);let v=O(()=>{if(!("geolocation"in navigator)){alert("Geolocation is not supported in this browser.");return}navigator.geolocation.getCurrentPosition(s=>{let f={type:"Feature",geometry:{type:"Point",coordinates:[s.coords.longitude,s.coords.latitude]},properties:{mode:"point",source:"geolocation"}};l||n.clear(),n.addFeatures([f]),a==null||a(n.getSnapshot()),d==null||d([f])},s=>{alert("Error getting geolocation"),console.error(s)}),o("current-location")},[n,l,a,d]),B=O(()=>{n.clear(),x(!1),o("static"),a==null||a([])},[n,a]),k=ze(()=>[{icon:c(X,{}),mode:"current-location",onClick:v,tooltip:"Use current location"},{icon:c(ee,{}),mode:"select",onClick:e,tooltip:"Select"},{icon:c(te,{}),mode:"point",onClick:e,tooltip:"Point"},{icon:c(oe,{}),mode:"linestring",onClick:e,tooltip:"Linestring"},{icon:c(re,{}),mode:"polygon",onClick:e,tooltip:"Polygon"},{icon:c(ne,{}),mode:"rectangle",onClick:e,tooltip:"Reactangle"},{icon:c(ie,{}),mode:"circle",onClick:e,tooltip:"Circle"},{icon:c(ae,{}),mode:"freehand",onClick:e,tooltip:"Freehand"},{icon:c(le,{}),mode:"clear",onClick:B,tooltip:"Clear all features",disabled:!b}],[e,v,B,b]);return He("div",{style:{position:"absolute",top:10,left:10,display:"flex",flexDirection:"column",gap:6,zIndex:1e3,backgroundColor:"rgba(255,255,255,0.9)",padding:8,borderRadius:6,boxShadow:"0 2px 6px rgba(0,0,0,0.2)",maxWidth:"90vw"},children:[c(N,{onClick:()=>m(s=>!s),style:{display:"flex",justifyContent:"center",alignItems:"center",width:40,height:40,padding:0,borderRadius:4,backgroundColor:"#d3d3d3"},title:"Expand or collapse tools",children:M?c(Q,{}):c(K,{})}),M&&c("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(40px, 1fr))",gap:6,maxHeight:"200px",overflowY:"auto",paddingRight:1},className:"custom-scrollbar",children:k.map((s,S)=>c(se,{icon:s.icon,mode:s.mode,currentMode:t,onClick:s.onClick,tooltip:s.tooltip,disabled:s.disabled},S))})]})}var de=Ee;import je from"@turf/bbox";import{defaultMapStyles as Ae}from"@biodiv-platform/naksha-commons";import{jsx as ge,jsxs as _e}from"react/jsx-runtime";var Ye=t=>{var V,W;let o=J(null),[e,n]=T(),[a,l]=T("static"),[d,M]=T(),m=J(),{isMultiple:b,features:x=[],onFeaturesChange:u}=t,[v,B]=T((t==null?void 0:t.mapStyle)||0),k=(V=t.mapStyles)!=null?V:Ae,s=(W=k[v])==null?void 0:W.style,S=k[v],f=J([]),R=ue(r=>{if(!(r!=null&&r.length)||!e)return;let g=je({type:"FeatureCollection",features:r});e.fitBounds(g,{padding:40,duration:1e3,maxZoom:15})},[e]);pe(()=>{var h,D,C,y,z,E,H,Z,U,j;x.length>0&&(f.current=G(x));let r=q({containerId:"maplibre-map",latitude:(D=(h=t.defaultViewState)==null?void 0:h.latitude)!=null?D:0,longitude:(y=(C=t.defaultViewState)==null?void 0:C.longitude)!=null?y:0,zoom:(E=(z=t.defaultViewState)==null?void 0:z.zoom)!=null?E:0,pitch:(Z=(H=t.defaultViewState)==null?void 0:H.pitch)!=null?Z:0,bearing:(j=(U=t.defaultViewState)==null?void 0:U.bearing)!=null?j:0,mapstyle:s});"maxZoom"in S&&S.maxZoom&&r.setMaxZoom(S.maxZoom);let g=new Ue({showCompass:!0,showZoom:!0,visualizePitch:!0}),p=new Ze({});return r.addControl(g,"bottom-right"),r.addControl(p,"bottom-right"),r.once("style.load",()=>{n(r)}),()=>{if(m.current&&(f.current=m.current.getSnapshot()),m.current){try{m.current.stop()}catch(Ke){}m.current=void 0,M(void 0)}r&&(r.removeControl(g),r.removeControl(p),r.remove())}},[s]);let he=r=>r.filter(g=>g.geometry.type!=="Point"||g.properties.mode!=="static"&&g.properties.mode!=="select");pe(()=>{if(!e)return;let r=_(e);r.start(),m.current=r,M(r);let g=()=>{let p=r.getSnapshot(),h=he(p);if(!b&&h.length>1){let D=h.at(-1),C=h.slice(0,-1).map(y=>y.id).filter(y=>Boolean(y));if(C.length>0)try{r.removeFeatures(C)}catch(y){}h=[D]}u==null||u(h),R(h)};return r.on("finish",g),setTimeout(()=>{if(r.getSnapshot().length===0){let p=[];f.current.length>0?p=f.current:x.length>0&&(p=G(x)),!b&&p.length>1&&(p=[p.at(-1)]),p.length>0&&(r.addFeatures(p),R(p))}},100),()=>{r.off("finish",g)}},[e]);let fe=ue(r=>{d==null||d.setMode(r),l(r)},[d]);return _e("div",{ref:o,id:"maplibre-map",style:{width:"100%",height:"100%",position:"relative"},children:[ge($,{currentStyleIdx:v,onStyleChange:r=>{m.current&&(f.current=m.current.getSnapshot()),B(r),l("static")},mapStyles:k}),d&&ge(de,{mode:a,setMode:l,onClick:fe,draw:d,onFeaturesChange:u,isMultiple:b,autoFocus:R})]})},me=Ye;import{jsx as $e}from"react/jsx-runtime";var Nt=t=>$e(me,w({},t));export{Nt as NakshaMaplibreDraw};