@biodiv-platform/naksha-gmaps-draw 4.5.5-beta.0 → 4.5.5

package/dist/index.cjs

@@ -1 +1,1106 @@
-"use strict";var Le=Object.create;var Z=Object.defineProperty;var Oe=Object.getOwnPropertyDescriptor;var Pe=Object.getOwnPropertyNames;var Ne=Object.getPrototypeOf,Fe=Object.prototype.hasOwnProperty;var Ge=(e,o)=>{for(var t in o)Z(e,t,{get:o[t],enumerable:!0})},se=(e,o,t,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of Pe(o))!Fe.call(e,n)&&n!==t&&Z(e,n,{get:()=>o[n],enumerable:!(a=Oe(o,n))||a.enumerable});return e};var J=(e,o,t)=>(t=e!=null?Le(Ne(e)):{},se(o||!e||!e.__esModule?Z(t,"default",{value:e,enumerable:!0}):t,e)),we=e=>se(Z({},"__esModule",{value:!0}),e);var _e={};Ge(_e,{GMAP_FEATURE_TYPES:()=>p,NakshaGmapsDraw:()=>Ve});module.exports=we(_e);var B=require("@biodiv-platform/naksha-commons"),V=require("@react-google-maps/api"),E=J(require("react"),1);var fe=require("@biodiv-platform/naksha-commons"),ge=require("@react-google-maps/api"),ye=require("react");var pe=J(require("@turf/bbox"),1);var p={POINT:"Point",POLYGON:"Polygon",LINESTRING:"LineString",RECTANGLE:"Rectangle",RAW:"Raw",NONE:null},le={mapTypeControlOptions:{position:10}};var de=e=>({type:p.POINT,properties:{id:new Date().getTime(),name:e.name,formatted_address:e.formatted_address},coordinates:Object.values(e.geometry.location.toJSON()).reverse()}),ce=e=>{let o=new Date().getTime();switch(e.getType()){case p.POINT:return{type:p.POINT,properties:{id:o},coordinates:Object.values(e.get().toJSON()).reverse()};case p.POLYGON:{let t=[],a=n=>t.push([n.lng(),n.lat()]);return e.forEachLatLng(a),t.push(t[0]),{type:p.POLYGON,properties:{id:o},coordinates:[t]}}case p.RAW:{let t=e.data;return t.push(t[0]),{type:p.POLYGON,properties:{id:o},coordinates:[t]}}case p.LINESTRING:{let t=[],a=n=>t.push([n.lng(),n.lat()]);return e.forEachLatLng(a),{type:p.LINESTRING,properties:{id:o},coordinates:t}}default:return null}},me=e=>{let o=(e||[]).filter(a=>a);return o.length===0?!1:{type:"FeatureCollection",features:o.map(a=>{if(Array.isArray(a)&&a.length>0&&a[0].isGeojson){let n=a[0];return{type:"Feature",properties:n.properties||{},geometry:n.geometry||null}}else return{type:"Feature",properties:{},geometry:a}})}},ue=e=>{let o=(0,pe.default)(e);return{east:o[2],north:o[3],south:o[1],west:o[0]}};var he=require("react/jsx-runtime");function q({InputComponent:e,addFeature:o,gmapRegion:t}){let[a,n]=(0,ye.useState)();return(0,he.jsx)(ge.Autocomplete,{onLoad:l=>{n(l)},fields:fe.GMAPS_AUTOCOMPLETE_FIELDS,onPlaceChanged:()=>{let l=de(a?.getPlace());o(l)},options:t?{componentRestrictions:{country:t}}:{},children:e})}var _=require("react/jsx-runtime"),ke={background:"white",position:"absolute",top:"5px",left:"106px",padding:"0.4rem",borderRadius:"0.15rem",outline:0,boxShadow:"rgba(0, 0, 0, 0.3) 0px 1px 4px -1px"};function Q({onClick:e}){return(0,_.jsx)("button",{type:"button",title:"Clear",onClick:e,style:ke,children:(0,_.jsx)("svg",{viewBox:"0 0 24 24",width:"12",height:"12",children:(0,_.jsx)("g",{fill:"#E53E3E",children:(0,_.jsx)("path",{d:"M19.452 7.5H4.547a.5.5 0 00-.5.545l1.287 14.136A2 2 0 007.326 24h9.347a2 2 0 001.992-1.819L19.95 8.045a.5.5 0 00-.129-.382.5.5 0 00-.369-.163zm-9.2 13a.75.75 0 01-1.5 0v-9a.75.75 0 011.5 0zm5 0a.75.75 0 01-1.5 0v-9a.75.75 0 011.5 0zM22 4h-4.75a.25.25 0 01-.25-.25V2.5A2.5 2.5 0 0014.5 0h-5A2.5 2.5 0 007 2.5v1.25a.25.25 0 01-.25.25H2a1 1 0 000 2h20a1 1 0 000-2zM9 3.75V2.5a.5.5 0 01.5-.5h5a.5.5 0 01.5.5v1.25a.25.25 0 01-.25.25h-5.5A.25.25 0 019 3.75z"})})})})}var L={ADD:"add",CLEAR:"clear",REPLACE:"replace"};function xe(e,{action:o,data:t,isMultiple:a}){switch(o){case L.ADD:return a?[...e||[],t]:[t];case L.CLEAR:return[];case L.REPLACE:return t;default:return e}}var O=J(require("react"),1);var W=require("react"),De={enableHighAccuracy:!1,timeout:1/0,maximumAge:0},Ee=(e,o=De)=>{let[t,a]=(0,W.useState)(),[n,g]=(0,W.useState)(),c=({coords:i})=>{a([i.longitude,i.latitude])},l=i=>{g(i.message)};return(0,W.useEffect)(()=>{if(!navigator||!navigator.geolocation){g("Geolocation is not supported");return}let i=null;return e?i=navigator.geolocation.watchPosition(c,l,o):i&&navigator.geolocation.clearWatch(i),()=>i&&navigator.geolocation.clearWatch(i)},[o,e]),{position:t,error:n}};var X=require("react/jsx-runtime");function $({TraceButtonComponent:e,onFeatureAdded:o}){let[t,a]=(0,O.useState)([]),[n,g]=(0,O.useState)(!1),{position:c}=Ee(n);(0,O.useEffect)(()=>{n&&c&&a([...t,c])},[n,c]);let l=()=>{n?(g(!1),o({getType:()=>p.RAW,data:[...t]}),a([])):g(!0)};return(0,X.jsx)("div",{children:O.default.isValidElement(e)?O.default.cloneElement(e,{onClick:l,isTracking:n}):(0,X.jsx)("button",{type:"button",onClick:l,style:{padding:"6px 12px",borderRadius:"4px",border:"1px solid #ccc",background:n?"#e53e3e":"#fff",color:n?"#fff":"#333",cursor:"pointer"},children:n?"Stop Tracing":"Trace Location"})})}var G=J(require("react"),1);var f=J(require("react"),1);var y=require("react/jsx-runtime"),Me=({addFeature:e,InputComponent:o,ButtonComponent:t,LocationIcon:a,SuccessIcon:n,FailureIcon:g})=>{let c=(0,f.useRef)(null),[l,i]=(0,f.useState)(!0),[v,x]=(0,f.useState)(""),[S,T]=(0,f.useState)([]),A=()=>{try{let s=c.current?.value??"";if(!s.trim()){i(!1),x("Invalid Format. Enter Latitude, Longitude.");return}let w=s.split(",").map(Number)?.reverse();if(!b(w)){i(!1),x("Invalid Format. Enter Latitude, Longitude.");return}let k={type:p.POINT,properties:{id:new Date().getTime(),name:s,formatted_address:s},coordinates:w};e(k),T(D=>[...D,k]),c.current&&(c.current.value=""),i(!0),x("Point added successfully")}catch{i(!1)}finally{setTimeout(()=>{x(""),i(!0)},3e3)}},b=s=>Array.isArray(s)&&s.length===2&&!isNaN(s[0])&&!isNaN(s[1])&&typeof s[0]=="number"&&typeof s[1]=="number";return(0,y.jsxs)("div",{style:{display:"flex",flexDirection:"column",alignItems:"flex-start"},children:[(0,y.jsx)("h1",{style:{marginBottom:"10px",fontWeight:"bold",fontSize:"1.25rem"},children:"Point"}),(0,y.jsxs)("div",{style:{display:"flex",alignItems:"center"},children:[f.default.isValidElement(o)?f.default.cloneElement(o,{ref:c,width:"300px"}):(0,y.jsx)("input",{ref:c,style:{width:"300px"}}),f.default.isValidElement(t)?f.default.cloneElement(t,{onClick:A,type:"button",marginLeft:"10px"}):(0,y.jsx)("button",{type:"button",onClick:A,style:{marginLeft:"10px"},children:"Add"})]}),v&&(0,y.jsxs)("div",{style:{fontWeight:"bold",color:l?"green":"red",marginTop:"10px",display:"flex",alignItems:"center"},children:[l?(0,y.jsx)("span",{style:{marginRight:"5px",fontSize:"1.25rem"},children:f.default.isValidElement(n)?f.default.cloneElement(n,{boxSize:6}):"\u2713"}):(0,y.jsx)("span",{style:{marginRight:"5px",fontSize:"1.25rem",color:"red"},children:f.default.isValidElement(g)?f.default.cloneElement(g,{boxSize:4}):"\u26A0"}),v]}),S.length>0&&(0,y.jsxs)("div",{style:{marginTop:"10px",paddingLeft:"15px"},children:[(0,y.jsx)("div",{style:{fontSize:"sm"},children:"Added Points:"}),(0,y.jsx)("ul",{style:{listStyleType:"none",padding:"0"},children:S.map(s=>(0,y.jsxs)("li",{style:{display:"flex",alignItems:"center",marginBottom:"5px"},children:[f.default.isValidElement(a)?f.default.cloneElement(a,{boxSize:6,marginRight:2,color:"teal"}):(0,y.jsx)("span",{style:{marginRight:"6px"},children:"\u{1F4CD}"}),(0,y.jsx)("span",{style:{overflow:"hidden",whiteSpace:"pre-wrap",textOverflow:"ellipsis",maxWidth:"300px"},children:s.properties.name})]},s.properties.id))})]})]})},ve=Me;var u=J(require("react"),1),r=require("react/jsx-runtime"),ze=({addFeature:e,ButtonComponent:o,FileIcon:t,SuccessIcon:a,FailureIcon:n,DeleteIcon:g})=>{let[c,l]=(0,u.useState)(!0),[i,v]=(0,u.useState)(""),[x,S]=(0,u.useState)([]),[T,A]=(0,u.useState)([]),b=(0,u.useRef)(null),s=m=>{m.preventDefault()},w=m=>{m.preventDefault()},k=m=>{m.preventDefault();let I=Array.from(m.dataTransfer.files);S(I)},D=()=>{let m=Array.from(b.current.files);S(m)},U=()=>{try{x.forEach(m=>{let I=new FileReader;I.onabort=()=>P("File reading was aborted. Please try again."),I.onerror=()=>P("File reading has failed. Please try again."),I.onload=()=>{let M=I.result;if(M){let K=typeof M=="string"?M:new TextDecoder().decode(M);try{let N=JSON.parse(K);(Array.isArray(N.features)?N.features.map(F=>({...F,isGeojson:!0})):[{...N,isGeojson:!0}]).forEach(F=>{e([F])}),v("Geojson added successfully"),l(!0),A(F=>[...F,{name:m.name}]),S([])}catch(N){console.error(N),P("Upload failed. Invalid GeoJSON format.")}}else P("File reading result is null.")},I.readAsText(m)})}catch(m){console.error(m),P("File upload failed. Please try again.")}finally{setTimeout(()=>{v(""),l(!0)},2e3)}},P=m=>{v(m),l(!1)},te=()=>{S([])};return(0,r.jsxs)("div",{style:{display:"flex",flexDirection:"column",alignItems:"flex-start",marginTop:"10px"},onDragEnter:s,onDragOver:w,onDrop:k,children:[(0,r.jsx)("h1",{style:{marginBottom:"10px",fontWeight:"bold",fontSize:"1.25rem"},children:"GeoJSON"}),(0,r.jsxs)("div",{style:{display:"flex",flexDirection:"row",alignItems:"center"},children:[(0,r.jsxs)("div",{style:{border:"2px solid #519895",borderRadius:"4px",display:"flex",flexDirection:"column",alignItems:"center",padding:"10px",cursor:"pointer",marginLeft:"15px",width:"300px",height:"100px"},onClick:()=>b.current.click(),children:[(0,r.jsx)("input",{type:"file",ref:b,onChange:D,style:{display:"none"}}),(0,r.jsx)("div",{style:{display:"flex",alignItems:"center"},children:x.length>0?(0,r.jsxs)("div",{style:{marginLeft:"10px",display:"flex",alignItems:"center"},children:[(0,r.jsx)("div",{style:{marginTop:"10px",overflow:"hidden",whiteSpace:"pre-wrap",textOverflow:"ellipsis",maxWidth:"200px"},children:x[0].name}),(0,r.jsx)("div",{style:{color:"red",marginLeft:"10px",marginTop:"10px",cursor:"pointer"},onClick:te,children:u.default.isValidElement(g)?u.default.cloneElement(g,{boxSize:6}):"\u2715"})]}):(0,r.jsx)(r.Fragment,{children:(0,r.jsx)("div",{children:"Drag 'n' drop GeoJSON file here, or click to select a file"})})})]}),u.default.isValidElement(o)?u.default.cloneElement(o,{type:"button",marginLeft:"30px",style:{paddingLeft:"15px"},onClick:U}):(0,r.jsx)("button",{type:"button",onClick:U,style:{marginLeft:"30px",padding:"6px 15px",cursor:"pointer"},children:"Add"})]}),i&&(0,r.jsxs)("div",{style:{fontWeight:"bold",color:c?"green":"red",marginTop:"10px",display:"flex",alignItems:"center"},children:[c?(0,r.jsx)("span",{style:{marginRight:"5px",fontSize:"1.25rem"},children:u.default.isValidElement(a)?u.default.cloneElement(a,{boxSize:6}):"\u2713"}):(0,r.jsx)("span",{style:{marginRight:"5px",fontSize:"1.25rem",color:"red"},children:u.default.isValidElement(n)?u.default.cloneElement(n,{boxSize:4}):"\u26A0"}),i]}),T.length>0&&(0,r.jsxs)("div",{style:{marginTop:"10px",paddingLeft:"15px"},children:[(0,r.jsx)("div",{style:{fontSize:"sm"},children:"Added GeoJSONs:"}),(0,r.jsx)("ul",{style:{listStyleType:"none",padding:"0"},children:T.map((m,I)=>(0,r.jsxs)("li",{style:{display:"flex",alignItems:"center"},children:[u.default.isValidElement(t)?u.default.cloneElement(t,{boxSize:6,marginRight:2}):(0,r.jsx)("span",{style:{marginRight:"8px"},children:"\u{1F4C4}"}),(0,r.jsx)("div",{style:{marginTop:"10px",overflow:"hidden",whiteSpace:"pre-wrap",textOverflow:"ellipsis",maxWidth:"300px"},children:m.name})]},I))})]})]})},Se=ze;var h=require("react/jsx-runtime"),Je=({isOpen:e,onClose:o,nakshaImport:t,geoJSONImport:a})=>e?(0,h.jsx)("div",{style:{position:"fixed",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(0, 0, 0, 0.5)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:99999},onClick:o,children:(0,h.jsxs)("div",{style:{background:"#fff",borderRadius:"8px",padding:"24px",maxWidth:"500px",width:"90%",maxHeight:"85vh",overflowY:"auto",boxShadow:"0 4px 12px rgba(0,0,0,0.15)",position:"relative"},onClick:n=>n.stopPropagation(),children:[(0,h.jsx)("button",{type:"button",onClick:o,style:{position:"absolute",top:12,right:12,border:"none",background:"none",fontSize:"18px",cursor:"pointer"},children:"\u2715"}),(0,h.jsx)("h3",{style:{margin:"0 0 16px 0",fontSize:"18px",fontWeight:600},children:"Import Data"}),(0,h.jsxs)("div",{style:{marginBottom:"20px"},children:[(0,h.jsx)("h4",{style:{margin:"0 0 8px 0",fontSize:"14px",fontWeight:500},children:"Import Coordinates"}),t]}),(0,h.jsxs)("div",{children:[(0,h.jsx)("h4",{style:{margin:"0 0 8px 0",fontSize:"14px",fontWeight:500},children:"Import GeoJSON"}),a]})]})}):null;function ee({ButtonComponent:e,ModalComponent:o,addFeature:t,InputComponent:a,ButtonComponentModal:n,DeleteIcon:g,LocationIcon:c,FileIcon:l,SuccessIcon:i,FailureIcon:v}){let[x,S]=(0,G.useState)(!1),T=()=>{S(!1)},A=()=>{S(!0)},b=(0,h.jsx)(ve,{addFeature:t,InputComponent:a,ButtonComponent:e,LocationIcon:c,SuccessIcon:i,FailureIcon:v}),s=(0,h.jsx)(Se,{addFeature:t,ButtonComponent:e,DeleteIcon:g,FileIcon:l,SuccessIcon:i,FailureIcon:v});return(0,h.jsxs)("div",{style:{display:"flex"},children:[G.default.isValidElement(o)?G.default.cloneElement(o,{isOpen:x,onClose:T,nakshaImport:b,geoJSONImport:s}):(0,h.jsx)(Je,{isOpen:x,onClose:T,nakshaImport:b,geoJSONImport:s}),G.default.isValidElement(n)?G.default.cloneElement(n,{onClick:A,type:"button"}):(0,h.jsx)("button",{type:"button",onClick:A,style:{padding:"6px 16px",backgroundColor:"#519895",color:"white",border:"none",borderRadius:"4px",cursor:"pointer"},children:"Import"})]})}var d=require("react/jsx-runtime"),Ve=E.default.forwardRef(({defaultViewState:e,defaultDrawingMode:o,data:t,onDataChange:a,gmapAccessToken:n,isControlled:g,isReadOnly:c,isMultiple:l,isImport:i,isAutocomplete:v,gmapRegion:x,autoCompleteRegion:S,mapStyle:T,importInputComponent:A,importButtonComponent:b,autocompleteComponent:s,showTrace:w,traceButtonComponent:k,maxZoom:D,options:U,importModalComponent:P,isOpen:te,onClose:m,importButtonComponentModal:I,importDeleteIcon:M,importLocationIcon:K,importFileIcon:N,importSuccessIcon:oe,importFailureIcon:F},ne)=>{let C=(0,E.useRef)(null),[Y,j]=(0,E.useReducer)(xe,t),[ae,Ie]=(0,E.useState)(),re=(0,E.useMemo)(()=>(0,B.mapboxToGmapsViewState)(e),[e]),be=()=>{C.current.state.map.data.forEach(function(z){C.current.state.map.data.remove(z)});let R=me(Y);if(R){R&&C.current.state.map.data.addGeoJson(R);let z=ue(R);z&&C.current.state.map.fitBounds(z),D&&google.maps.event.addListenerOnce(C.current.state.map,"idle",function(){let Ce=C.current.state.map.getZoom();C.current.state.map.setZoom(Math.min(D,Ce))})}};(0,E.useEffect)(()=>{ae&&(a&&a(Y),ne&&(ne.current={addFeature:H,replaceFeature:Re}),be())},[ae,Y]),(0,E.useEffect)(()=>{g&&JSON.stringify(Y)!==JSON.stringify(t)&&j({action:L.REPLACE,data:t})},[t]);let H=R=>{j({action:L.ADD,data:R,isMultiple:l})},Re=R=>{j({action:L.REPLACE,data:[R]})},ie=R=>{let z=ce(R);H(z)},Te=()=>{j({action:L.CLEAR})},Ae=()=>Ie(!0);return(0,d.jsx)(V.LoadScriptNext,{googleMapsApiKey:n,region:x,libraries:v?B.GMAPS_LIBRARIES.AUTOCOMPLETE:B.GMAPS_LIBRARIES.DEFAULT,children:(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)("div",{style:{display:"flex"},children:[v&&(0,d.jsx)("div",{style:{width:"500px"},children:(0,d.jsx)(q,{InputComponent:s||(0,d.jsx)("input",{}),addFeature:H,gmapRegion:S??x})}),(0,d.jsx)("div",{style:{flex:"1"}}),i&&(0,d.jsx)(ee,{ButtonComponent:b||(0,d.jsx)("button",{children:"add"}),ModalComponent:P,InputComponent:A||(0,d.jsx)("input",{}),addFeature:H,ButtonComponentModal:I||(0,d.jsx)("button",{children:"Import"}),DeleteIcon:M,LocationIcon:K,FileIcon:N,SuccessIcon:oe,FailureIcon:F})]}),w&&(0,d.jsx)($,{TraceButtonComponent:k||(0,d.jsx)("button",{children:"trace"}),onFeatureAdded:ie}),(0,d.jsxs)(V.GoogleMap,{id:"naksha-gmaps-draw",mapContainerStyle:T||{height:"100%",width:"100%"},zoom:re.zoom,center:re.center,options:le,ref:C,onLoad:Ae,children:[l&&(0,d.jsx)(Q,{onClick:Te}),!c&&(0,d.jsx)(V.Data,{options:{controls:[p.POINT,p.POLYGON,p.LINESTRING],drawingMode:o||p.POLYGON,featureFactory:ie,...U||{}}})]})]})})});0&&(module.exports={GMAP_FEATURE_TYPES,NakshaGmapsDraw});
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  GMAP_FEATURE_TYPES: () => GMAP_FEATURE_TYPES,
+  NakshaGmapsDraw: () => NakshaGmapsDraw
+});
+module.exports = __toCommonJS(index_exports);
+var import_naksha_commons2 = require("@biodiv-platform/naksha-commons");
+var import_api2 = require("@react-google-maps/api");
+var import_react7 = __toESM(require("react"), 1);
+
+// src/autocomplete/index.tsx
+var import_naksha_commons = require("@biodiv-platform/naksha-commons");
+var import_api = require("@react-google-maps/api");
+var import_react = require("react");
+
+// src/utils/geojson.tsx
+var import_bbox = __toESM(require("@turf/bbox"), 1);
+
+// src/static/constants.tsx
+var GMAP_FEATURE_TYPES = {
+  POINT: "Point",
+  POLYGON: "Polygon",
+  LINESTRING: "LineString",
+  RECTANGLE: "Rectangle",
+  RAW: "Raw",
+  NONE: null
+};
+var GMAP_OPTIONS = {
+  mapTypeControlOptions: {
+    position: 10
+  }
+};
+
+// src/utils/geojson.tsx
+var placeToGeoJsonFeature = (place) => {
+  return {
+    type: GMAP_FEATURE_TYPES.POINT,
+    properties: {
+      id: (/* @__PURE__ */ new Date()).getTime(),
+      name: place.name,
+      formatted_address: place.formatted_address
+    },
+    coordinates: Object.values(place.geometry.location.toJSON()).reverse()
+  };
+};
+var geometryToGeoJsonFeature = (geometry) => {
+  const id = (/* @__PURE__ */ new Date()).getTime();
+  switch (geometry.getType()) {
+    case GMAP_FEATURE_TYPES.POINT: {
+      return {
+        type: GMAP_FEATURE_TYPES.POINT,
+        properties: { id },
+        coordinates: Object.values(geometry.get().toJSON()).reverse()
+      };
+    }
+    case GMAP_FEATURE_TYPES.POLYGON: {
+      const clist = [];
+      const toLatLng = (c) => clist.push([c.lng(), c.lat()]);
+      geometry.forEachLatLng(toLatLng);
+      clist.push(clist[0]);
+      return {
+        type: GMAP_FEATURE_TYPES.POLYGON,
+        properties: { id },
+        coordinates: [clist]
+      };
+    }
+    case GMAP_FEATURE_TYPES.RAW: {
+      const clist = geometry.data;
+      clist.push(clist[0]);
+      return {
+        type: GMAP_FEATURE_TYPES.POLYGON,
+        properties: { id },
+        coordinates: [clist]
+      };
+    }
+    case GMAP_FEATURE_TYPES.LINESTRING: {
+      const clist = [];
+      const toLatLng = (c) => clist.push([c.lng(), c.lat()]);
+      geometry.forEachLatLng(toLatLng);
+      return {
+        type: GMAP_FEATURE_TYPES.LINESTRING,
+        properties: { id },
+        coordinates: clist
+      };
+    }
+    default:
+      return null;
+  }
+};
+var toFullGeoJson = (features) => {
+  const cleanFeaures = (features || []).filter((o) => o);
+  if (cleanFeaures.length === 0) {
+    return false;
+  }
+  const mergedGeoJson = {
+    type: "FeatureCollection",
+    features: cleanFeaures.map((value) => {
+      if (Array.isArray(value) && value.length > 0 && value[0].isGeojson) {
+        const feature = value[0];
+        return {
+          type: "Feature",
+          properties: feature.properties || {},
+          geometry: feature.geometry || null
+        };
+      } else {
+        return { type: "Feature", properties: {}, geometry: value };
+      }
+    })
+  };
+  return mergedGeoJson;
+};
+var calculateBounds = (geojson) => {
+  const b = (0, import_bbox.default)(geojson);
+  return {
+    east: b[2],
+    north: b[3],
+    south: b[1],
+    west: b[0]
+  };
+};
+
+// src/autocomplete/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function NakshaAutocomplete({
+  InputComponent,
+  addFeature,
+  gmapRegion
+}) {
+  const [ac, setAc] = (0, import_react.useState)();
+  const onLoad = (autocomplete) => {
+    setAc(autocomplete);
+  };
+  const onPlaceChanged = () => {
+    const feature = placeToGeoJsonFeature(ac?.getPlace());
+    addFeature(feature);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_api.Autocomplete,
+    {
+      onLoad,
+      fields: import_naksha_commons.GMAPS_AUTOCOMPLETE_FIELDS,
+      onPlaceChanged,
+      options: gmapRegion ? { componentRestrictions: { country: gmapRegion } } : {},
+      children: InputComponent
+    }
+  );
+}
+
+// src/features/clear-features.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ButtonStyle = {
+  background: "white",
+  position: "absolute",
+  top: "5px",
+  left: "106px",
+  padding: "0.4rem",
+  borderRadius: "0.15rem",
+  outline: 0,
+  boxShadow: "rgba(0, 0, 0, 0.3) 0px 1px 4px -1px"
+};
+function ClearFeatures({ onClick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", title: "Clear", onClick, style: ButtonStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 24 24", width: "12", height: "12", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { fill: "#E53E3E", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M19.452 7.5H4.547a.5.5 0 00-.5.545l1.287 14.136A2 2 0 007.326 24h9.347a2 2 0 001.992-1.819L19.95 8.045a.5.5 0 00-.129-.382.5.5 0 00-.369-.163zm-9.2 13a.75.75 0 01-1.5 0v-9a.75.75 0 011.5 0zm5 0a.75.75 0 01-1.5 0v-9a.75.75 0 011.5 0zM22 4h-4.75a.25.25 0 01-.25-.25V2.5A2.5 2.5 0 0014.5 0h-5A2.5 2.5 0 007 2.5v1.25a.25.25 0 01-.25.25H2a1 1 0 000 2h20a1 1 0 000-2zM9 3.75V2.5a.5.5 0 01.5-.5h5a.5.5 0 01.5.5v1.25a.25.25 0 01-.25.25h-5.5A.25.25 0 019 3.75z" }) }) }) });
+}
+
+// src/reducers/features.tsx
+var ACTION_TYPES = {
+  ADD: "add",
+  CLEAR: "clear",
+  REPLACE: "replace"
+};
+function featuresReducer(state, { action, data, isMultiple }) {
+  switch (action) {
+    case ACTION_TYPES.ADD:
+      return isMultiple ? [...state || [], data] : [data];
+    case ACTION_TYPES.CLEAR:
+      return [];
+    case ACTION_TYPES.REPLACE:
+      return data;
+    default:
+      return state;
+  }
+}
+
+// src/trace-location/index.tsx
+var import_react3 = __toESM(require("react"), 1);
+
+// src/utils/use-location.tsx
+var import_react2 = require("react");
+var defaultSettings = {
+  enableHighAccuracy: false,
+  timeout: Infinity,
+  maximumAge: 0
+};
+var usePosition = (watch, settings = defaultSettings) => {
+  const [position, setPosition] = (0, import_react2.useState)();
+  const [error, setError] = (0, import_react2.useState)();
+  const onChange = ({ coords }) => {
+    setPosition([coords.longitude, coords.latitude]);
+  };
+  const onError = (error2) => {
+    setError(error2.message);
+  };
+  (0, import_react2.useEffect)(() => {
+    if (!navigator || !navigator.geolocation) {
+      setError("Geolocation is not supported");
+      return;
+    }
+    let watcher = null;
+    if (watch) {
+      watcher = navigator.geolocation.watchPosition(
+        onChange,
+        onError,
+        settings
+      );
+    } else {
+      watcher && navigator.geolocation.clearWatch(watcher);
+    }
+    return () => watcher && navigator.geolocation.clearWatch(watcher);
+  }, [settings, watch]);
+  return { position, error };
+};
+
+// src/trace-location/index.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function TraceLocation({
+  TraceButtonComponent,
+  onFeatureAdded
+}) {
+  const [trackData, setTrackData] = (0, import_react3.useState)([]);
+  const [isTracking, setIsTracking] = (0, import_react3.useState)(false);
+  const { position } = usePosition(isTracking);
+  (0, import_react3.useEffect)(() => {
+    if (isTracking && position) {
+      setTrackData([...trackData, position]);
+    }
+  }, [isTracking, position]);
+  const handleOnTraceAction = () => {
+    if (isTracking) {
+      setIsTracking(false);
+      onFeatureAdded({
+        getType: () => GMAP_FEATURE_TYPES.RAW,
+        data: [...trackData]
+      });
+      setTrackData([]);
+    } else {
+      setIsTracking(true);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: import_react3.default.isValidElement(TraceButtonComponent) ? import_react3.default.cloneElement(TraceButtonComponent, {
+    onClick: handleOnTraceAction,
+    isTracking
+  }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick: handleOnTraceAction,
+      style: {
+        padding: "6px 12px",
+        borderRadius: "4px",
+        border: "1px solid #ccc",
+        background: isTracking ? "#e53e3e" : "#fff",
+        color: isTracking ? "#fff" : "#333",
+        cursor: "pointer"
+      },
+      children: isTracking ? "Stop Tracing" : "Trace Location"
+    }
+  ) });
+}
+
+// src/ModalImport/index.tsx
+var import_react6 = __toESM(require("react"), 1);
+
+// src/import/index.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var NakshaImport = ({
+  addFeature,
+  InputComponent,
+  ButtonComponent,
+  LocationIcon,
+  SuccessIcon,
+  FailureIcon
+}) => {
+  const importInputRef = (0, import_react4.useRef)(null);
+  const [isPointsValid, setIsPointsValid] = (0, import_react4.useState)(true);
+  const [uploadStatus, setUploadStatus] = (0, import_react4.useState)("");
+  const [importedPoints, setImportedPoints] = (0, import_react4.useState)([]);
+  const handleOnAddFeature = () => {
+    try {
+      const txtLatLng = importInputRef.current?.value ?? "";
+      if (!txtLatLng.trim()) {
+        setIsPointsValid(false);
+        setUploadStatus("Invalid Format. Enter Latitude, Longitude.");
+        return;
+      }
+      const numLatLng = txtLatLng.split(",").map(Number)?.reverse();
+      if (!isValidLatLng(numLatLng)) {
+        setIsPointsValid(false);
+        setUploadStatus("Invalid Format. Enter Latitude, Longitude.");
+        return;
+      }
+      const newFeature = {
+        type: GMAP_FEATURE_TYPES.POINT,
+        properties: {
+          id: (/* @__PURE__ */ new Date()).getTime(),
+          name: txtLatLng,
+          formatted_address: txtLatLng
+        },
+        coordinates: numLatLng
+      };
+      addFeature(newFeature);
+      setImportedPoints((prevPoints) => [...prevPoints, newFeature]);
+      if (importInputRef.current) {
+        importInputRef.current.value = "";
+      }
+      setIsPointsValid(true);
+      setUploadStatus("Point added successfully");
+    } catch (e) {
+      setIsPointsValid(false);
+    } finally {
+      setTimeout(() => {
+        setUploadStatus("");
+        setIsPointsValid(true);
+      }, 3e3);
+    }
+  };
+  const isValidLatLng = (latLng) => {
+    return Array.isArray(latLng) && latLng.length === 2 && !isNaN(latLng[0]) && !isNaN(latLng[1]) && typeof latLng[0] === "number" && typeof latLng[1] === "number";
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "h1",
+          {
+            style: {
+              marginBottom: "10px",
+              fontWeight: "bold",
+              fontSize: "1.25rem"
+            },
+            children: "Point"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
+          import_react4.default.isValidElement(InputComponent) ? import_react4.default.cloneElement(InputComponent, {
+            ref: importInputRef,
+            width: "300px"
+          }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { ref: importInputRef, style: { width: "300px" } }),
+          import_react4.default.isValidElement(ButtonComponent) ? import_react4.default.cloneElement(ButtonComponent, {
+            onClick: handleOnAddFeature,
+            type: "button",
+            marginLeft: "10px"
+          }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: handleOnAddFeature,
+              style: { marginLeft: "10px" },
+              children: "Add"
+            }
+          )
+        ] }),
+        uploadStatus && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "div",
+          {
+            style: {
+              fontWeight: "bold",
+              color: isPointsValid ? "green" : "red",
+              marginTop: "10px",
+              display: "flex",
+              alignItems: "center"
+            },
+            children: [
+              isPointsValid ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { marginRight: "5px", fontSize: "1.25rem" }, children: import_react4.default.isValidElement(SuccessIcon) ? import_react4.default.cloneElement(SuccessIcon, { boxSize: 6 }) : "\u2713" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "span",
+                {
+                  style: { marginRight: "5px", fontSize: "1.25rem", color: "red" },
+                  children: import_react4.default.isValidElement(FailureIcon) ? import_react4.default.cloneElement(FailureIcon, { boxSize: 4 }) : "\u26A0"
+                }
+              ),
+              uploadStatus
+            ]
+          }
+        ),
+        importedPoints.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginTop: "10px", paddingLeft: "15px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "sm" }, children: "Added Points:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { style: { listStyleType: "none", padding: "0" }, children: importedPoints.map((point) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "li",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                marginBottom: "5px"
+              },
+              children: [
+                import_react4.default.isValidElement(LocationIcon) ? import_react4.default.cloneElement(LocationIcon, {
+                  boxSize: 6,
+                  marginRight: 2,
+                  color: "teal"
+                }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { marginRight: "6px" }, children: "\u{1F4CD}" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "span",
+                  {
+                    style: {
+                      overflow: "hidden",
+                      whiteSpace: "pre-wrap",
+                      textOverflow: "ellipsis",
+                      maxWidth: "300px"
+                    },
+                    children: point.properties.name
+                  }
+                )
+              ]
+            },
+            point.properties.id
+          )) })
+        ] })
+      ]
+    }
+  );
+};
+var import_default = NakshaImport;
+
+// src/geojson/index.tsx
+var import_react5 = __toESM(require("react"), 1);
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var GeojsonImport = ({
+  addFeature,
+  ButtonComponent,
+  FileIcon,
+  SuccessIcon,
+  FailureIcon,
+  DeleteIcon
+}) => {
+  const [isGeoJSONValid, setIsGeoJSONValid] = (0, import_react5.useState)(true);
+  const [uploadStatus, setUploadStatus] = (0, import_react5.useState)("");
+  const [filesToUpload, setFilesToUpload] = (0, import_react5.useState)([]);
+  const [uploadedFiles, setUploadedFiles] = (0, import_react5.useState)([]);
+  const fileInputRef = (0, import_react5.useRef)(null);
+  const handleDragEnter = (e) => {
+    e.preventDefault();
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    const droppedFiles = Array.from(e.dataTransfer.files);
+    setFilesToUpload(droppedFiles);
+  };
+  const handleFileInputChange = () => {
+    const selectedFiles = Array.from(fileInputRef.current.files);
+    setFilesToUpload(selectedFiles);
+  };
+  const handleAddFeature = () => {
+    try {
+      filesToUpload.forEach((file) => {
+        const reader = new FileReader();
+        reader.onabort = () => handleError("File reading was aborted. Please try again.");
+        reader.onerror = () => handleError("File reading has failed. Please try again.");
+        reader.onload = () => {
+          const result = reader.result;
+          if (result) {
+            const jsonString = typeof result === "string" ? result : new TextDecoder().decode(result);
+            try {
+              const geojsonObject = JSON.parse(jsonString);
+              const featuresToAdd = Array.isArray(geojsonObject.features) ? geojsonObject.features.map((feature) => ({
+                ...feature,
+                isGeojson: true
+              })) : [{ ...geojsonObject, isGeojson: true }];
+              featuresToAdd.forEach((featureToAdd) => {
+                addFeature([featureToAdd]);
+              });
+              setUploadStatus("Geojson added successfully");
+              setIsGeoJSONValid(true);
+              setUploadedFiles((prevFiles) => [
+                ...prevFiles,
+                { name: file.name }
+              ]);
+              setFilesToUpload([]);
+            } catch (error) {
+              console.error(error);
+              handleError("Upload failed. Invalid GeoJSON format.");
+            }
+          } else {
+            handleError("File reading result is null.");
+          }
+        };
+        reader.readAsText(file);
+      });
+    } catch (error) {
+      console.error(error);
+      handleError("File upload failed. Please try again.");
+    } finally {
+      setTimeout(() => {
+        setUploadStatus("");
+        setIsGeoJSONValid(true);
+      }, 2e3);
+    }
+  };
+  const handleError = (message) => {
+    setUploadStatus(message);
+    setIsGeoJSONValid(false);
+  };
+  const removeFile = () => {
+    setFilesToUpload([]);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        marginTop: "10px"
+      },
+      onDragEnter: handleDragEnter,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "h1",
+          {
+            style: {
+              marginBottom: "10px",
+              fontWeight: "bold",
+              fontSize: "1.25rem"
+            },
+            children: "GeoJSON"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                "div",
+                {
+                  style: {
+                    border: "2px solid #519895",
+                    borderRadius: "4px",
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    padding: "10px",
+                    cursor: "pointer",
+                    marginLeft: "15px",
+                    width: "300px",
+                    height: "100px"
+                  },
+                  onClick: () => fileInputRef.current.click(),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      "input",
+                      {
+                        type: "file",
+                        ref: fileInputRef,
+                        onChange: handleFileInputChange,
+                        style: { display: "none" }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center"
+                        },
+                        children: filesToUpload.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                          "div",
+                          {
+                            style: {
+                              marginLeft: "10px",
+                              display: "flex",
+                              alignItems: "center"
+                            },
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                                "div",
+                                {
+                                  style: {
+                                    marginTop: "10px",
+                                    overflow: "hidden",
+                                    whiteSpace: "pre-wrap",
+                                    textOverflow: "ellipsis",
+                                    maxWidth: "200px"
+                                  },
+                                  children: filesToUpload[0].name
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                                "div",
+                                {
+                                  style: {
+                                    color: "red",
+                                    marginLeft: "10px",
+                                    marginTop: "10px",
+                                    cursor: "pointer"
+                                  },
+                                  onClick: removeFile,
+                                  children: import_react5.default.isValidElement(DeleteIcon) ? import_react5.default.cloneElement(DeleteIcon, { boxSize: 6 }) : "\u2715"
+                                }
+                              )
+                            ]
+                          }
+                        ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: "Drag 'n' drop GeoJSON file here, or click to select a file" }) })
+                      }
+                    )
+                  ]
+                }
+              ),
+              import_react5.default.isValidElement(ButtonComponent) ? import_react5.default.cloneElement(ButtonComponent, {
+                type: "button",
+                marginLeft: "30px",
+                style: { paddingLeft: "15px" },
+                onClick: handleAddFeature
+              }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleAddFeature,
+                  style: {
+                    marginLeft: "30px",
+                    padding: "6px 15px",
+                    cursor: "pointer"
+                  },
+                  children: "Add"
+                }
+              )
+            ]
+          }
+        ),
+        uploadStatus && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "div",
+          {
+            style: {
+              fontWeight: "bold",
+              color: isGeoJSONValid ? "green" : "red",
+              marginTop: "10px",
+              display: "flex",
+              alignItems: "center"
+            },
+            children: [
+              isGeoJSONValid ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "span",
+                {
+                  style: {
+                    marginRight: "5px",
+                    fontSize: "1.25rem"
+                  },
+                  children: import_react5.default.isValidElement(SuccessIcon) ? import_react5.default.cloneElement(SuccessIcon, { boxSize: 6 }) : "\u2713"
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "span",
+                {
+                  style: {
+                    marginRight: "5px",
+                    fontSize: "1.25rem",
+                    color: "red"
+                  },
+                  children: import_react5.default.isValidElement(FailureIcon) ? import_react5.default.cloneElement(FailureIcon, { boxSize: 4 }) : "\u26A0"
+                }
+              ),
+              uploadStatus
+            ]
+          }
+        ),
+        uploadedFiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "div",
+          {
+            style: {
+              marginTop: "10px",
+              paddingLeft: "15px"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "div",
+                {
+                  style: {
+                    fontSize: "sm"
+                  },
+                  children: "Added GeoJSONs:"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "ul",
+                {
+                  style: {
+                    listStyleType: "none",
+                    padding: "0"
+                  },
+                  children: uploadedFiles.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                    "li",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "center"
+                      },
+                      children: [
+                        import_react5.default.isValidElement(FileIcon) ? import_react5.default.cloneElement(FileIcon, { boxSize: 6, marginRight: 2 }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { marginRight: "8px" }, children: "\u{1F4C4}" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                          "div",
+                          {
+                            style: {
+                              marginTop: "10px",
+                              overflow: "hidden",
+                              whiteSpace: "pre-wrap",
+                              textOverflow: "ellipsis",
+                              maxWidth: "300px"
+                            },
+                            children: file.name
+                          }
+                        )
+                      ]
+                    },
+                    index
+                  ))
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var geojson_default = GeojsonImport;
+
+// src/ModalImport/index.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var DefaultModal = ({ isOpen, onClose, nakshaImport, geoJSONImport }) => {
+  if (!isOpen) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 99999
+      },
+      onClick: onClose,
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        "div",
+        {
+          style: {
+            background: "#fff",
+            borderRadius: "8px",
+            padding: "24px",
+            maxWidth: "500px",
+            width: "90%",
+            maxHeight: "85vh",
+            overflowY: "auto",
+            boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+            position: "relative"
+          },
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                style: {
+                  position: "absolute",
+                  top: 12,
+                  right: 12,
+                  border: "none",
+                  background: "none",
+                  fontSize: "18px",
+                  cursor: "pointer"
+                },
+                children: "\u2715"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "h3",
+              {
+                style: { margin: "0 0 16px 0", fontSize: "18px", fontWeight: 600 },
+                children: "Import Data"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { marginBottom: "20px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "h4",
+                {
+                  style: { margin: "0 0 8px 0", fontSize: "14px", fontWeight: 500 },
+                  children: "Import Coordinates"
+                }
+              ),
+              nakshaImport
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "h4",
+                {
+                  style: { margin: "0 0 8px 0", fontSize: "14px", fontWeight: 500 },
+                  children: "Import GeoJSON"
+                }
+              ),
+              geoJSONImport
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+function ModalImport({
+  ButtonComponent,
+  ModalComponent,
+  addFeature,
+  InputComponent,
+  ButtonComponentModal,
+  DeleteIcon,
+  LocationIcon,
+  FileIcon,
+  SuccessIcon,
+  FailureIcon
+}) {
+  const [isModalOpen, setIsModalOpen] = (0, import_react6.useState)(false);
+  const handleModalClose = () => {
+    setIsModalOpen(false);
+  };
+  const handleOpenModal = () => {
+    setIsModalOpen(true);
+  };
+  const nakshaImport = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_default,
+    {
+      addFeature,
+      InputComponent,
+      ButtonComponent,
+      LocationIcon,
+      SuccessIcon,
+      FailureIcon
+    }
+  );
+  const geoJSONImport = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    geojson_default,
+    {
+      addFeature,
+      ButtonComponent,
+      DeleteIcon,
+      FileIcon,
+      SuccessIcon,
+      FailureIcon
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex" }, children: [
+    import_react6.default.isValidElement(ModalComponent) ? import_react6.default.cloneElement(ModalComponent, {
+      isOpen: isModalOpen,
+      onClose: handleModalClose,
+      nakshaImport,
+      geoJSONImport
+    }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      DefaultModal,
+      {
+        isOpen: isModalOpen,
+        onClose: handleModalClose,
+        nakshaImport,
+        geoJSONImport
+      }
+    ),
+    import_react6.default.isValidElement(ButtonComponentModal) ? import_react6.default.cloneElement(ButtonComponentModal, {
+      onClick: handleOpenModal,
+      type: "button"
+    }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: handleOpenModal,
+        style: {
+          padding: "6px 16px",
+          backgroundColor: "#519895",
+          color: "white",
+          border: "none",
+          borderRadius: "4px",
+          cursor: "pointer"
+        },
+        children: "Import"
+      }
+    )
+  ] });
+}
+
+// src/index.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var NakshaGmapsDraw = import_react7.default.forwardRef(
+  ({
+    defaultViewState,
+    defaultDrawingMode,
+    data,
+    onDataChange,
+    gmapAccessToken,
+    isControlled,
+    isReadOnly,
+    isMultiple,
+    isImport,
+    isAutocomplete,
+    gmapRegion,
+    autoCompleteRegion,
+    mapStyle,
+    importInputComponent,
+    importButtonComponent,
+    autocompleteComponent,
+    showTrace,
+    traceButtonComponent,
+    maxZoom,
+    options,
+    importModalComponent,
+    isOpen,
+    onClose,
+    importButtonComponentModal,
+    importDeleteIcon,
+    importLocationIcon,
+    importFileIcon,
+    importSuccessIcon,
+    importFailureIcon
+  }, ref) => {
+    const mapRef = (0, import_react7.useRef)(null);
+    const [features, dispatch] = (0, import_react7.useReducer)(featuresReducer, data);
+    const [isLoaded, setIsLoaded] = (0, import_react7.useState)();
+    const viewPort = (0, import_react7.useMemo)(
+      () => (0, import_naksha_commons2.mapboxToGmapsViewState)(defaultViewState),
+      [defaultViewState]
+    );
+    const reloadFeatures = () => {
+      mapRef.current.state.map.data.forEach(function(feature) {
+        mapRef.current.state.map.data.remove(feature);
+      });
+      const fullGeoJson = toFullGeoJson(features);
+      if (fullGeoJson) {
+        fullGeoJson && mapRef.current.state.map.data.addGeoJson(fullGeoJson);
+        const bounds = calculateBounds(fullGeoJson);
+        bounds && mapRef.current.state.map.fitBounds(bounds);
+        if (maxZoom) {
+          google.maps.event.addListenerOnce(
+            mapRef.current.state.map,
+            "idle",
+            function() {
+              const z = mapRef.current.state.map.getZoom();
+              mapRef.current.state.map.setZoom(Math.min(maxZoom, z));
+            }
+          );
+        }
+      }
+    };
+    (0, import_react7.useEffect)(() => {
+      if (isLoaded) {
+        onDataChange && onDataChange(features);
+        if (ref) {
+          ref.current = { addFeature, replaceFeature };
+        }
+        reloadFeatures();
+      }
+    }, [isLoaded, features]);
+    (0, import_react7.useEffect)(() => {
+      if (isControlled && JSON.stringify(features) !== JSON.stringify(data)) {
+        dispatch({
+          action: ACTION_TYPES.REPLACE,
+          data
+        });
+      }
+    }, [data]);
+    const addFeature = (feature) => {
+      dispatch({ action: ACTION_TYPES.ADD, data: feature, isMultiple });
+    };
+    const replaceFeature = (feature) => {
+      dispatch({ action: ACTION_TYPES.REPLACE, data: [feature] });
+    };
+    const onFeatureAdded = (geometry) => {
+      const feature = geometryToGeoJsonFeature(geometry);
+      addFeature(feature);
+    };
+    const onClearFeatures = () => {
+      dispatch({ action: ACTION_TYPES.CLEAR });
+    };
+    const onMapLoaded = () => setIsLoaded(true);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_api2.LoadScriptNext,
+      {
+        googleMapsApiKey: gmapAccessToken,
+        region: gmapRegion,
+        libraries: isAutocomplete ? import_naksha_commons2.GMAPS_LIBRARIES.AUTOCOMPLETE : import_naksha_commons2.GMAPS_LIBRARIES.DEFAULT,
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex" }, children: [
+            isAutocomplete && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { width: "500px" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              NakshaAutocomplete,
+              {
+                InputComponent: autocompleteComponent || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", {}),
+                addFeature,
+                gmapRegion: autoCompleteRegion ?? gmapRegion
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: "1" } }),
+            isImport && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              ModalImport,
+              {
+                ButtonComponent: importButtonComponent || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { children: "add" }),
+                ModalComponent: importModalComponent,
+                InputComponent: importInputComponent || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", {}),
+                addFeature,
+                ButtonComponentModal: importButtonComponentModal || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { children: "Import" }),
+                DeleteIcon: importDeleteIcon,
+                LocationIcon: importLocationIcon,
+                FileIcon: importFileIcon,
+                SuccessIcon: importSuccessIcon,
+                FailureIcon: importFailureIcon
+              }
+            )
+          ] }),
+          showTrace && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            TraceLocation,
+            {
+              TraceButtonComponent: traceButtonComponent || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { children: "trace" }),
+              onFeatureAdded
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            import_api2.GoogleMap,
+            {
+              id: "naksha-gmaps-draw",
+              mapContainerStyle: mapStyle || { height: "100%", width: "100%" },
+              zoom: viewPort.zoom,
+              center: viewPort.center,
+              options: GMAP_OPTIONS,
+              ref: mapRef,
+              onLoad: onMapLoaded,
+              children: [
+                isMultiple && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ClearFeatures, { onClick: onClearFeatures }),
+                !isReadOnly && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  import_api2.Data,
+                  {
+                    options: {
+                      controls: [
+                        GMAP_FEATURE_TYPES.POINT,
+                        GMAP_FEATURE_TYPES.POLYGON,
+                        GMAP_FEATURE_TYPES.LINESTRING
+                      ],
+                      drawingMode: defaultDrawingMode || GMAP_FEATURE_TYPES.POLYGON,
+                      featureFactory: onFeatureAdded,
+                      ...options || {}
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GMAP_FEATURE_TYPES,
+  NakshaGmapsDraw
+});