@biodiv-platform/naksha-gmaps-draw 4.5.3 → 4.5.4

package/dist/index.cjs

@@ -0,0 +1 @@
+"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});

package/dist/index.d.cts

@@ -0,0 +1,46 @@
+import React from 'react';
+
+declare const GMAP_FEATURE_TYPES: {
+    POINT: string;
+    POLYGON: string;
+    LINESTRING: string;
+    RECTANGLE: string;
+    RAW: string;
+    NONE: null;
+};
+
+interface NakshaGmapsDrawProps {
+    defaultViewState?: any;
+    defaultDrawingMode?: any;
+    data?: any;
+    onDataChange?: any;
+    gmapAccessToken?: any;
+    isControlled?: boolean;
+    isReadOnly?: boolean;
+    isImport?: boolean;
+    isMultiple?: boolean;
+    isAutocomplete?: boolean;
+    gmapRegion?: any;
+    autoCompleteRegion?: any;
+    mapStyle?: React.CSSProperties;
+    importInputComponent?: any;
+    importButtonComponent?: any;
+    autocompleteComponent?: any;
+    showTrace?: any;
+    traceButtonComponent?: any;
+    maxZoom?: any;
+    options?: any;
+    importModalComponent?: any;
+    isOpen?: any;
+    onClose?: any;
+    importButtonComponentModal?: any;
+    importDeleteIcon?: any;
+    importLocationIcon?: any;
+    importFileIcon?: any;
+    importSuccessIcon?: any;
+    importFailureIcon?: any;
+}
+declare const NakshaGmapsDraw: React.ForwardRefExoticComponent<NakshaGmapsDrawProps & React.RefAttributes<unknown>>;
+
+export { GMAP_FEATURE_TYPES, NakshaGmapsDraw };
+export type { NakshaGmapsDrawProps };

package/dist/index.d.ts

@@ -42,4 +42,5 @@ interface NakshaGmapsDrawProps {
 }
 declare const NakshaGmapsDraw: React.ForwardRefExoticComponent<NakshaGmapsDrawProps & React.RefAttributes<unknown>>;
 
-export { GMAP_FEATURE_TYPES, NakshaGmapsDraw, NakshaGmapsDrawProps };
+export { GMAP_FEATURE_TYPES, NakshaGmapsDraw };
+export type { NakshaGmapsDrawProps };

package/dist/index.js

@@ -1 +1 @@
-"use strict";var Re=Object.create;var Z=Object.defineProperty;var Oe=Object.getOwnPropertyDescriptor;var Fe=Object.getOwnPropertyNames;var Ne=Object.getPrototypeOf,Ce=Object.prototype.hasOwnProperty;var be=(e,o)=>{for(var t in o)Z(e,t,{get:o[t],enumerable:!0})},se=(e,o,t,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of Fe(o))!Ce.call(e,r)&&r!==t&&Z(e,r,{get:()=>o[r],enumerable:!(n=Oe(o,r))||n.enumerable});return e};var J=(e,o,t)=>(t=e!=null?Re(Ne(e)):{},se(o||!e||!e.__esModule?Z(t,"default",{value:e,enumerable:!0}):t,e)),Ge=e=>se(Z({},"__esModule",{value:!0}),e);var Be={};be(Be,{GMAP_FEATURE_TYPES:()=>s,NakshaGmapsDraw:()=>_e});module.exports=Ge(Be);var W=require("@biodiv-platform/naksha-commons"),_=require("@react-google-maps/api"),g=J(require("react"));var fe=require("@biodiv-platform/naksha-commons"),ge=require("@react-google-maps/api"),ye=require("react");var pe=J(require("@turf/bbox"));var s={POINT:"Point",POLYGON:"Polygon",LINESTRING:"LineString",RECTANGLE:"Rectangle",RAW:"Raw",NONE:null},le={mapTypeControlOptions:{position:10}};var ce=e=>({type:s.POINT,properties:{id:new Date().getTime(),name:e.name,formatted_address:e.formatted_address},coordinates:Object.values(e.geometry.location.toJSON()).reverse()}),de=e=>{let o=new Date().getTime();switch(e.getType()){case s.POINT:return{type:s.POINT,properties:{id:o},coordinates:Object.values(e.get().toJSON()).reverse()};case s.POLYGON:{let t=[],n=r=>t.push([r.lng(),r.lat()]);return e.forEachLatLng(n),t.push(t[0]),{type:s.POLYGON,properties:{id:o},coordinates:[t]}}case s.RAW:{let t=e.data;return t.push(t[0]),{type:s.POLYGON,properties:{id:o},coordinates:[t]}}case s.LINESTRING:{let t=[],n=r=>t.push([r.lng(),r.lat()]);return e.forEachLatLng(n),{type:s.LINESTRING,properties:{id:o},coordinates:t}}default:return null}},ue=e=>{let o=(e||[]).filter(n=>n);return o.length===0?!1:{type:"FeatureCollection",features:o.map(n=>{if(Array.isArray(n)&&n.length>0&&n[0].isGeojson){let r=n[0];return{type:"Feature",properties:r.properties||{},geometry:r.geometry||null}}else return{type:"Feature",properties:{},geometry:n}})}},me=e=>{let o=(0,pe.default)(e);return{east:o[2],north:o[3],south:o[1],west:o[0]}};var we=require("react/jsx-runtime");function X({InputComponent:e,addFeature:o,gmapRegion:t}){let[n,r]=(0,ye.useState)();return(0,we.jsx)(ge.Autocomplete,{onLoad:l=>{r(l)},fields:fe.GMAPS_AUTOCOMPLETE_FIELDS,onPlaceChanged:()=>{let l=ce(n==null?void 0:n.getPlace());o(l)},options:t?{componentRestrictions:{country:t}}:{},children:e})}var K=require("react/jsx-runtime"),De={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 $({onClick:e}){return(0,K.jsx)("button",{type:"button",title:"Clear",onClick:e,style:De,children:(0,K.jsx)("svg",{viewBox:"0 0 24 24",width:"12",height:"12",children:(0,K.jsx)("g",{fill:"#E53E3E",children:(0,K.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 O={ADD:"add",CLEAR:"clear",REPLACE:"replace"};function he(e,{action:o,data:t,isMultiple:n}){switch(o){case O.ADD:return n?[...e||[],t]:[t];case O.CLEAR:return[];case O.REPLACE:return t;default:return e}}var G=J(require("react"));var U=require("react"),Me={enableHighAccuracy:!1,timeout:1/0,maximumAge:0},xe=(e,o=Me)=>{let[t,n]=(0,U.useState)(),[r,m]=(0,U.useState)(),d=({coords:a})=>{n([a.longitude,a.latitude])},l=a=>{m(a.message)};return(0,U.useEffect)(()=>{if(!navigator||!navigator.geolocation){m("Geolocation is not supported");return}let a=null;return e?a=navigator.geolocation.watchPosition(d,l,o):a&&navigator.geolocation.clearWatch(a),()=>a&&navigator.geolocation.clearWatch(a)},[o,e]),{position:t,error:r}};var ke=require("react/jsx-runtime");function ee({TraceButtonComponent:e,onFeatureAdded:o}){let[t,n]=(0,G.useState)([]),[r,m]=(0,G.useState)(!1),{position:d}=xe(r);(0,G.useEffect)(()=>{r&&d&&n([...t,d])},[r,d]);let l=()=>{r?(m(!1),o({getType:()=>s.RAW,data:[...t]}),n([])):m(!0)};return(0,ke.jsx)("div",{children:G.default.cloneElement(e,{onClick:l,isTracking:r})})}var Y=J(require("react"));var I=J(require("react"));var E=require("react/jsx-runtime"),ze=({addFeature:e,InputComponent:o,ButtonComponent:t,LocationIcon:n,SuccessIcon:r,FailureIcon:m})=>{let d=(0,I.useRef)(null),[l,a]=(0,I.useState)(!0),[x,y]=(0,I.useState)(""),[f,L]=(0,I.useState)([]),F=()=>{var u,w,D;try{let T=(w=(u=d.current)==null?void 0:u.value)!=null?w:"";if(!T.trim()){a(!1),y("Invalid Format. Enter Latitude, Longitude.");return}let M=(D=T.split(",").map(Number))==null?void 0:D.reverse();if(!N(M)){a(!1),y("Invalid Format. Enter Latitude, Longitude.");return}let S={type:s.POINT,properties:{id:new Date().getTime(),name:T,formatted_address:T},coordinates:M};e(S),L(B=>[...B,S]),d.current&&(d.current.value=""),a(!0),y("Point added successfully")}catch{a(!1)}finally{setTimeout(()=>{y(""),a(!0)},3e3)}},N=u=>Array.isArray(u)&&u.length===2&&!isNaN(u[0])&&!isNaN(u[1])&&typeof u[0]=="number"&&typeof u[1]=="number";return(0,E.jsxs)("div",{style:{display:"flex",flexDirection:"column",alignItems:"flex-start"},children:[(0,E.jsx)("h1",{style:{marginBottom:"10px",fontWeight:"bold",fontSize:"1.25rem"},children:"Point"}),(0,E.jsxs)("div",{style:{display:"flex",alignItems:"center"},children:[I.default.cloneElement(o,{ref:d,width:"300px"}),I.default.cloneElement(t,{onClick:F,type:"button",marginLeft:"10px"})]}),x&&(0,E.jsxs)("div",{style:{fontWeight:"bold",color:l?"green":"red",marginTop:"10px",display:"flex",alignItems:"center"},children:[l?(0,E.jsx)("span",{style:{marginRight:"5px",fontSize:"1.25rem"},children:I.default.cloneElement(r,{boxSize:6})}):(0,E.jsx)("span",{style:{marginRight:"5px",fontSize:"1.25rem",color:"red"},children:I.default.cloneElement(m,{boxSize:4})}),x]}),f.length>0&&(0,E.jsxs)("div",{style:{marginTop:"10px",paddingLeft:"15px"},children:[(0,E.jsx)("div",{style:{fontSize:"sm"},children:"Added Points:"}),(0,E.jsx)("ul",{style:{listStyleType:"none",padding:"0"},children:f.map(u=>(0,E.jsxs)("li",{style:{display:"flex",alignItems:"center",marginBottom:"5px"},children:[I.default.cloneElement(n,{boxSize:6,marginRight:2,color:"teal"}),(0,E.jsx)("span",{style:{overflow:"hidden",whiteSpace:"pre-wrap",textOverflow:"ellipsis",maxWidth:"300px"},children:u.properties.name})]},u.properties.id))})]})]})},Ee=ze;var h=J(require("react")),i=require("react/jsx-runtime"),Je=({addFeature:e,ButtonComponent:o,FileIcon:t,SuccessIcon:n,FailureIcon:r,DeleteIcon:m})=>{let[d,l]=(0,h.useState)(!0),[a,x]=(0,h.useState)(""),[y,f]=(0,h.useState)([]),[L,F]=(0,h.useState)([]),N=(0,h.useRef)(null),u=p=>{p.preventDefault()},w=p=>{p.preventDefault()},D=p=>{p.preventDefault();let v=Array.from(p.dataTransfer.files);f(v)},T=()=>{let p=Array.from(N.current.files);f(p)},M=()=>{try{y.forEach(p=>{let v=new FileReader;v.onabort=()=>S("File reading was aborted. Please try again."),v.onerror=()=>S("File reading has failed. Please try again."),v.onload=()=>{let k=v.result;if(k){let Q=typeof k=="string"?k:new TextDecoder().decode(k);try{let C=JSON.parse(Q);(Array.isArray(C.features)?C.features.map(b=>({...b,isGeojson:!0})):[{...C,isGeojson:!0}]).forEach(b=>{e([b])}),x("Geojson added successfully"),l(!0),F(b=>[...b,{name:p.name}]),f([])}catch(C){console.error(C),S("Upload failed. Invalid GeoJSON format.")}}else S("File reading result is null.")},v.readAsText(p)})}catch(p){console.error(p),S("File upload failed. Please try again.")}finally{setTimeout(()=>{x(""),l(!0)},2e3)}},S=p=>{x(p),l(!1)},B=()=>{f([])};return(0,i.jsxs)("div",{style:{display:"flex",flexDirection:"column",alignItems:"flex-start",marginTop:"10px"},onDragEnter:u,onDragOver:w,onDrop:D,children:[(0,i.jsx)("h1",{style:{marginBottom:"10px",fontWeight:"bold",fontSize:"1.25rem"},children:"GeoJSON"}),(0,i.jsxs)("div",{style:{display:"flex",flexDirection:"row",alignItems:"center"},children:[(0,i.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:()=>N.current.click(),children:[(0,i.jsx)("input",{type:"file",ref:N,onChange:T,style:{display:"none"}}),(0,i.jsx)("div",{style:{display:"flex",alignItems:"center"},children:y.length>0?(0,i.jsxs)("div",{style:{marginLeft:"10px",display:"flex",alignItems:"center"},children:[(0,i.jsx)("div",{style:{marginTop:"10px",overflow:"hidden",whiteSpace:"pre-wrap",textOverflow:"ellipsis",maxWidth:"200px"},children:y[0].name}),(0,i.jsx)("div",{style:{color:"red",marginLeft:"10px",marginTop:"10px",cursor:"pointer"},onClick:B,children:h.default.cloneElement(m,{boxSize:6})})]}):(0,i.jsx)(i.Fragment,{children:(0,i.jsx)("div",{children:"Drag 'n' drop GeoJSON file here, or click to select a file"})})})]}),h.default.cloneElement(o,{type:"button",marginLeft:"30px",style:{paddingLeft:"15px"},onClick:M})]}),a&&(0,i.jsxs)("div",{style:{fontWeight:"bold",color:d?"green":"red",marginTop:"10px",display:"flex",alignItems:"center"},children:[d?(0,i.jsx)("span",{style:{marginRight:"5px",fontSize:"1.25rem"},children:h.default.cloneElement(n,{boxSize:6})}):(0,i.jsx)("span",{style:{marginRight:"5px",fontSize:"1.25rem",color:"red"},children:h.default.cloneElement(r,{boxSize:4})}),a]}),L.length>0&&(0,i.jsxs)("div",{style:{marginTop:"10px",paddingLeft:"15px"},children:[(0,i.jsx)("div",{style:{fontSize:"sm"},children:"Added GeoJSONs:"}),(0,i.jsx)("ul",{style:{listStyleType:"none",padding:"0"},children:L.map((p,v)=>(0,i.jsxs)("li",{style:{display:"flex",alignItems:"center"},children:[h.default.cloneElement(t,{boxSize:6,marginRight:2}),(0,i.jsx)("div",{style:{marginTop:"10px",overflow:"hidden",whiteSpace:"pre-wrap",textOverflow:"ellipsis",maxWidth:"300px"},children:p.name})]},v))})]})]})},Ie=Je;var q=require("react/jsx-runtime");function te({ButtonComponent:e,ModalComponent:o,addFeature:t,InputComponent:n,ButtonComponentModal:r,DeleteIcon:m,LocationIcon:d,FileIcon:l,SuccessIcon:a,FailureIcon:x}){let[y,f]=(0,Y.useState)(!1),L=()=>{f(!1)},F=()=>{f(!0)};return(0,q.jsxs)("div",{style:{display:"flex"},children:[Y.default.cloneElement(o,{isOpen:y,onClose:L,nakshaImport:(0,q.jsx)(Ee,{addFeature:t,InputComponent:n,ButtonComponent:e,LocationIcon:d,SuccessIcon:a,FailureIcon:x}),geoJSONImport:(0,q.jsx)(Ie,{addFeature:t,ButtonComponent:e,DeleteIcon:m,FileIcon:l,SuccessIcon:a,FailureIcon:x})}),Y.default.cloneElement(r,{onClick:F,type:"button"})]})}var c=require("react/jsx-runtime"),_e=g.default.forwardRef(({defaultViewState:e,defaultDrawingMode:o,data:t,onDataChange:n,gmapAccessToken:r,isControlled:m,isReadOnly:d,isMultiple:l,isImport:a,isAutocomplete:x,gmapRegion:y,autoCompleteRegion:f,mapStyle:L,importInputComponent:F,importButtonComponent:N,autocompleteComponent:u,showTrace:w,traceButtonComponent:D,maxZoom:T,options:M,importModalComponent:S,isOpen:B,onClose:p,importButtonComponentModal:v,importDeleteIcon:k,importLocationIcon:Q,importFileIcon:C,importSuccessIcon:oe,importFailureIcon:b},ne)=>{let R=(0,g.useRef)(null),[V,j]=(0,g.useReducer)(he,t),[re,Se]=(0,g.useState)(),ae=(0,g.useMemo)(()=>(0,W.mapboxToGmapsViewState)(e),[e]),ve=()=>{R.current.state.map.data.forEach(function(z){R.current.state.map.data.remove(z)});let A=ue(V);if(A){A&&R.current.state.map.data.addGeoJson(A);let z=me(A);z&&R.current.state.map.fitBounds(z),T&&google.maps.event.addListenerOnce(R.current.state.map,"idle",function(){let Le=R.current.state.map.getZoom();R.current.state.map.setZoom(Math.min(T,Le))})}};(0,g.useEffect)(()=>{re&&(n&&n(V),ne&&(ne.current={addFeature:H,replaceFeature:Te}),ve())},[re,V]),(0,g.useEffect)(()=>{m&&JSON.stringify(V)!==JSON.stringify(t)&&j({action:O.REPLACE,data:t})},[t]);let H=A=>{j({action:O.ADD,data:A,isMultiple:l})},Te=A=>{j({action:O.REPLACE,data:[A]})},ie=A=>{let z=de(A);H(z)},Ae=()=>{j({action:O.CLEAR})},Pe=()=>Se(!0);return(0,c.jsx)(_.LoadScriptNext,{googleMapsApiKey:r,region:y,libraries:x?W.GMAPS_LIBRARIES.AUTOCOMPLETE:W.GMAPS_LIBRARIES.DEFAULT,children:(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)("div",{style:{display:"flex"},children:[x&&(0,c.jsx)("div",{style:{width:"500px"},children:(0,c.jsx)(X,{InputComponent:u||(0,c.jsx)("input",{}),addFeature:H,gmapRegion:f!=null?f:y})}),(0,c.jsx)("div",{style:{flex:"1"}}),(0,c.jsx)(te,{ButtonComponent:N||(0,c.jsx)("button",{children:"add"}),ModalComponent:S&&g.default.cloneElement(S,{isOpen:B,onClose:p}),InputComponent:F||(0,c.jsx)("input",{}),addFeature:H,ButtonComponentModal:v||(0,c.jsx)("button",{children:"add"}),DeleteIcon:k,LocationIcon:Q,FileIcon:C,SuccessIcon:oe,FailureIcon:b})]}),w&&(0,c.jsx)(ee,{TraceButtonComponent:D||(0,c.jsx)("button",{children:"trace"}),onFeatureAdded:ie}),(0,c.jsxs)(_.GoogleMap,{id:"naksha-gmaps-draw",mapContainerStyle:L||{height:"100%",width:"100%"},zoom:ae.zoom,center:ae.center,options:le,ref:R,onLoad:Pe,children:[l&&(0,c.jsx)($,{onClick:Ae}),!d&&(0,c.jsx)(_.Data,{options:{controls:[s.POINT,s.POLYGON,s.LINESTRING],drawingMode:o||s.POLYGON,featureFactory:ie,...M||{}}})]})]})})});0&&(module.exports={GMAP_FEATURE_TYPES,NakshaGmapsDraw});
+import{GMAPS_LIBRARIES as xe,mapboxToGmapsViewState as We}from"@biodiv-platform/naksha-commons";import{Data as Be,GoogleMap as Ue,LoadScriptNext as Ye}from"@react-google-maps/api";import je,{useEffect as Ee,useMemo as He,useReducer as Ze,useRef as Ke,useState as qe}from"react";import{GMAPS_AUTOCOMPLETE_FIELDS as Ce}from"@biodiv-platform/naksha-commons";import{Autocomplete as Le}from"@react-google-maps/api";import{useState as Oe}from"react";import Ae from"@turf/bbox";var p={POINT:"Point",POLYGON:"Polygon",LINESTRING:"LineString",RECTANGLE:"Rectangle",RAW:"Raw",NONE:null},re={mapTypeControlOptions:{position:10}};var ie=t=>({type:p.POINT,properties:{id:new Date().getTime(),name:t.name,formatted_address:t.formatted_address},coordinates:Object.values(t.geometry.location.toJSON()).reverse()}),se=t=>{let o=new Date().getTime();switch(t.getType()){case p.POINT:return{type:p.POINT,properties:{id:o},coordinates:Object.values(t.get().toJSON()).reverse()};case p.POLYGON:{let e=[],a=n=>e.push([n.lng(),n.lat()]);return t.forEachLatLng(a),e.push(e[0]),{type:p.POLYGON,properties:{id:o},coordinates:[e]}}case p.RAW:{let e=t.data;return e.push(e[0]),{type:p.POLYGON,properties:{id:o},coordinates:[e]}}case p.LINESTRING:{let e=[],a=n=>e.push([n.lng(),n.lat()]);return t.forEachLatLng(a),{type:p.LINESTRING,properties:{id:o},coordinates:e}}default:return null}},le=t=>{let o=(t||[]).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}})}},pe=t=>{let o=Ae(t);return{east:o[2],north:o[3],south:o[1],west:o[0]}};import{jsx as Pe}from"react/jsx-runtime";function H({InputComponent:t,addFeature:o,gmapRegion:e}){let[a,n]=Oe();return Pe(Le,{onLoad:s=>{n(s)},fields:Ce,onPlaceChanged:()=>{let s=ie(a?.getPlace());o(s)},options:e?{componentRestrictions:{country:e}}:{},children:t})}import{jsx as W}from"react/jsx-runtime";var Ne={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 Z({onClick:t}){return W("button",{type:"button",title:"Clear",onClick:t,style:Ne,children:W("svg",{viewBox:"0 0 24 24",width:"12",height:"12",children:W("g",{fill:"#E53E3E",children:W("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 C={ADD:"add",CLEAR:"clear",REPLACE:"replace"};function de(t,{action:o,data:e,isMultiple:a}){switch(o){case C.ADD:return a?[...t||[],e]:[e];case C.CLEAR:return[];case C.REPLACE:return e;default:return t}}import ue,{useEffect as we,useState as fe}from"react";import{useState as ce,useEffect as Fe}from"react";var Ge={enableHighAccuracy:!1,timeout:1/0,maximumAge:0},me=(t,o=Ge)=>{let[e,a]=ce(),[n,c]=ce(),l=({coords:r})=>{a([r.longitude,r.latitude])},s=r=>{c(r.message)};return Fe(()=>{if(!navigator||!navigator.geolocation){c("Geolocation is not supported");return}let r=null;return t?r=navigator.geolocation.watchPosition(l,s,o):r&&navigator.geolocation.clearWatch(r),()=>r&&navigator.geolocation.clearWatch(r)},[o,t]),{position:e,error:n}};import{jsx as ge}from"react/jsx-runtime";function K({TraceButtonComponent:t,onFeatureAdded:o}){let[e,a]=fe([]),[n,c]=fe(!1),{position:l}=me(n);we(()=>{n&&l&&a([...e,l])},[n,l]);let s=()=>{n?(c(!1),o({getType:()=>p.RAW,data:[...e]}),a([])):c(!0)};return ge("div",{children:ue.isValidElement(t)?ue.cloneElement(t,{onClick:s,isTracking:n}):ge("button",{type:"button",onClick:s,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"})})}import U,{useState as Ve}from"react";import v,{useRef as ke,useState as q}from"react";import{jsx as R,jsxs as M}from"react/jsx-runtime";var De=({addFeature:t,InputComponent:o,ButtonComponent:e,LocationIcon:a,SuccessIcon:n,FailureIcon:c})=>{let l=ke(null),[s,r]=q(!0),[g,m]=q(""),[y,I]=q([]),b=()=>{try{let i=l.current?.value??"";if(!i.trim()){r(!1),m("Invalid Format. Enter Latitude, Longitude.");return}let F=i.split(",").map(Number)?.reverse();if(!x(F)){r(!1),m("Invalid Format. Enter Latitude, Longitude.");return}let G={type:p.POINT,properties:{id:new Date().getTime(),name:i,formatted_address:i},coordinates:F};t(G),I(w=>[...w,G]),l.current&&(l.current.value=""),r(!0),m("Point added successfully")}catch{r(!1)}finally{setTimeout(()=>{m(""),r(!0)},3e3)}},x=i=>Array.isArray(i)&&i.length===2&&!isNaN(i[0])&&!isNaN(i[1])&&typeof i[0]=="number"&&typeof i[1]=="number";return M("div",{style:{display:"flex",flexDirection:"column",alignItems:"flex-start"},children:[R("h1",{style:{marginBottom:"10px",fontWeight:"bold",fontSize:"1.25rem"},children:"Point"}),M("div",{style:{display:"flex",alignItems:"center"},children:[v.isValidElement(o)?v.cloneElement(o,{ref:l,width:"300px"}):R("input",{ref:l,style:{width:"300px"}}),v.isValidElement(e)?v.cloneElement(e,{onClick:b,type:"button",marginLeft:"10px"}):R("button",{type:"button",onClick:b,style:{marginLeft:"10px"},children:"Add"})]}),g&&M("div",{style:{fontWeight:"bold",color:s?"green":"red",marginTop:"10px",display:"flex",alignItems:"center"},children:[s?R("span",{style:{marginRight:"5px",fontSize:"1.25rem"},children:v.isValidElement(n)?v.cloneElement(n,{boxSize:6}):"\u2713"}):R("span",{style:{marginRight:"5px",fontSize:"1.25rem",color:"red"},children:v.isValidElement(c)?v.cloneElement(c,{boxSize:4}):"\u26A0"}),g]}),y.length>0&&M("div",{style:{marginTop:"10px",paddingLeft:"15px"},children:[R("div",{style:{fontSize:"sm"},children:"Added Points:"}),R("ul",{style:{listStyleType:"none",padding:"0"},children:y.map(i=>M("li",{style:{display:"flex",alignItems:"center",marginBottom:"5px"},children:[v.isValidElement(a)?v.cloneElement(a,{boxSize:6,marginRight:2,color:"teal"}):R("span",{style:{marginRight:"6px"},children:"\u{1F4CD}"}),R("span",{style:{overflow:"hidden",whiteSpace:"pre-wrap",textOverflow:"ellipsis",maxWidth:"300px"},children:i.properties.name})]},i.properties.id))})]})]})},ye=De;import S,{useState as B,useRef as Me}from"react";import{Fragment as Je,jsx as u,jsxs as N}from"react/jsx-runtime";var ze=({addFeature:t,ButtonComponent:o,FileIcon:e,SuccessIcon:a,FailureIcon:n,DeleteIcon:c})=>{let[l,s]=B(!0),[r,g]=B(""),[m,y]=B([]),[I,b]=B([]),x=Me(null),i=d=>{d.preventDefault()},F=d=>{d.preventDefault()},G=d=>{d.preventDefault();let h=Array.from(d.dataTransfer.files);y(h)},w=()=>{let d=Array.from(x.current.files);y(d)},z=()=>{try{m.forEach(d=>{let h=new FileReader;h.onabort=()=>L("File reading was aborted. Please try again."),h.onerror=()=>L("File reading has failed. Please try again."),h.onload=()=>{let k=h.result;if(k){let j=typeof k=="string"?k:new TextDecoder().decode(k);try{let O=JSON.parse(j);(Array.isArray(O.features)?O.features.map(P=>({...P,isGeojson:!0})):[{...O,isGeojson:!0}]).forEach(P=>{t([P])}),g("Geojson added successfully"),s(!0),b(P=>[...P,{name:d.name}]),y([])}catch(O){console.error(O),L("Upload failed. Invalid GeoJSON format.")}}else L("File reading result is null.")},h.readAsText(d)})}catch(d){console.error(d),L("File upload failed. Please try again.")}finally{setTimeout(()=>{g(""),s(!0)},2e3)}},L=d=>{g(d),s(!1)},$=()=>{y([])};return N("div",{style:{display:"flex",flexDirection:"column",alignItems:"flex-start",marginTop:"10px"},onDragEnter:i,onDragOver:F,onDrop:G,children:[u("h1",{style:{marginBottom:"10px",fontWeight:"bold",fontSize:"1.25rem"},children:"GeoJSON"}),N("div",{style:{display:"flex",flexDirection:"row",alignItems:"center"},children:[N("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:()=>x.current.click(),children:[u("input",{type:"file",ref:x,onChange:w,style:{display:"none"}}),u("div",{style:{display:"flex",alignItems:"center"},children:m.length>0?N("div",{style:{marginLeft:"10px",display:"flex",alignItems:"center"},children:[u("div",{style:{marginTop:"10px",overflow:"hidden",whiteSpace:"pre-wrap",textOverflow:"ellipsis",maxWidth:"200px"},children:m[0].name}),u("div",{style:{color:"red",marginLeft:"10px",marginTop:"10px",cursor:"pointer"},onClick:$,children:S.isValidElement(c)?S.cloneElement(c,{boxSize:6}):"\u2715"})]}):u(Je,{children:u("div",{children:"Drag 'n' drop GeoJSON file here, or click to select a file"})})})]}),S.isValidElement(o)?S.cloneElement(o,{type:"button",marginLeft:"30px",style:{paddingLeft:"15px"},onClick:z}):u("button",{type:"button",onClick:z,style:{marginLeft:"30px",padding:"6px 15px",cursor:"pointer"},children:"Add"})]}),r&&N("div",{style:{fontWeight:"bold",color:l?"green":"red",marginTop:"10px",display:"flex",alignItems:"center"},children:[l?u("span",{style:{marginRight:"5px",fontSize:"1.25rem"},children:S.isValidElement(a)?S.cloneElement(a,{boxSize:6}):"\u2713"}):u("span",{style:{marginRight:"5px",fontSize:"1.25rem",color:"red"},children:S.isValidElement(n)?S.cloneElement(n,{boxSize:4}):"\u26A0"}),r]}),I.length>0&&N("div",{style:{marginTop:"10px",paddingLeft:"15px"},children:[u("div",{style:{fontSize:"sm"},children:"Added GeoJSONs:"}),u("ul",{style:{listStyleType:"none",padding:"0"},children:I.map((d,h)=>N("li",{style:{display:"flex",alignItems:"center"},children:[S.isValidElement(e)?S.cloneElement(e,{boxSize:6,marginRight:2}):u("span",{style:{marginRight:"8px"},children:"\u{1F4C4}"}),u("div",{style:{marginTop:"10px",overflow:"hidden",whiteSpace:"pre-wrap",textOverflow:"ellipsis",maxWidth:"300px"},children:d.name})]},h))})]})]})},he=ze;import{jsx as T,jsxs as Y}from"react/jsx-runtime";var _e=({isOpen:t,onClose:o,nakshaImport:e,geoJSONImport:a})=>t?T("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:Y("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:[T("button",{type:"button",onClick:o,style:{position:"absolute",top:12,right:12,border:"none",background:"none",fontSize:"18px",cursor:"pointer"},children:"\u2715"}),T("h3",{style:{margin:"0 0 16px 0",fontSize:"18px",fontWeight:600},children:"Import Data"}),Y("div",{style:{marginBottom:"20px"},children:[T("h4",{style:{margin:"0 0 8px 0",fontSize:"14px",fontWeight:500},children:"Import Coordinates"}),e]}),Y("div",{children:[T("h4",{style:{margin:"0 0 8px 0",fontSize:"14px",fontWeight:500},children:"Import GeoJSON"}),a]})]})}):null;function Q({ButtonComponent:t,ModalComponent:o,addFeature:e,InputComponent:a,ButtonComponentModal:n,DeleteIcon:c,LocationIcon:l,FileIcon:s,SuccessIcon:r,FailureIcon:g}){let[m,y]=Ve(!1),I=()=>{y(!1)},b=()=>{y(!0)},x=T(ye,{addFeature:e,InputComponent:a,ButtonComponent:t,LocationIcon:l,SuccessIcon:r,FailureIcon:g}),i=T(he,{addFeature:e,ButtonComponent:t,DeleteIcon:c,FileIcon:s,SuccessIcon:r,FailureIcon:g});return Y("div",{style:{display:"flex"},children:[U.isValidElement(o)?U.cloneElement(o,{isOpen:m,onClose:I,nakshaImport:x,geoJSONImport:i}):T(_e,{isOpen:m,onClose:I,nakshaImport:x,geoJSONImport:i}),U.isValidElement(n)?U.cloneElement(n,{onClick:b,type:"button"}):T("button",{type:"button",onClick:b,style:{padding:"6px 16px",backgroundColor:"#519895",color:"white",border:"none",borderRadius:"4px",cursor:"pointer"},children:"Import"})]})}import{Fragment as Qe,jsx as f,jsxs as X}from"react/jsx-runtime";var _t=je.forwardRef(({defaultViewState:t,defaultDrawingMode:o,data:e,onDataChange:a,gmapAccessToken:n,isControlled:c,isReadOnly:l,isMultiple:s,isImport:r,isAutocomplete:g,gmapRegion:m,autoCompleteRegion:y,mapStyle:I,importInputComponent:b,importButtonComponent:x,autocompleteComponent:i,showTrace:F,traceButtonComponent:G,maxZoom:w,options:z,importModalComponent:L,isOpen:$,onClose:d,importButtonComponentModal:h,importDeleteIcon:k,importLocationIcon:j,importFileIcon:O,importSuccessIcon:ee,importFailureIcon:P},te)=>{let A=Ke(null),[J,V]=Ze(de,e),[oe,ve]=qe(),ne=He(()=>We(t),[t]),Se=()=>{A.current.state.map.data.forEach(function(D){A.current.state.map.data.remove(D)});let E=le(J);if(E){E&&A.current.state.map.data.addGeoJson(E);let D=pe(E);D&&A.current.state.map.fitBounds(D),w&&google.maps.event.addListenerOnce(A.current.state.map,"idle",function(){let Te=A.current.state.map.getZoom();A.current.state.map.setZoom(Math.min(w,Te))})}};Ee(()=>{oe&&(a&&a(J),te&&(te.current={addFeature:_,replaceFeature:Ie}),Se())},[oe,J]),Ee(()=>{c&&JSON.stringify(J)!==JSON.stringify(e)&&V({action:C.REPLACE,data:e})},[e]);let _=E=>{V({action:C.ADD,data:E,isMultiple:s})},Ie=E=>{V({action:C.REPLACE,data:[E]})},ae=E=>{let D=se(E);_(D)},be=()=>{V({action:C.CLEAR})},Re=()=>ve(!0);return f(Ye,{googleMapsApiKey:n,region:m,libraries:g?xe.AUTOCOMPLETE:xe.DEFAULT,children:X(Qe,{children:[X("div",{style:{display:"flex"},children:[g&&f("div",{style:{width:"500px"},children:f(H,{InputComponent:i||f("input",{}),addFeature:_,gmapRegion:y??m})}),f("div",{style:{flex:"1"}}),r&&f(Q,{ButtonComponent:x||f("button",{children:"add"}),ModalComponent:L,InputComponent:b||f("input",{}),addFeature:_,ButtonComponentModal:h||f("button",{children:"Import"}),DeleteIcon:k,LocationIcon:j,FileIcon:O,SuccessIcon:ee,FailureIcon:P})]}),F&&f(K,{TraceButtonComponent:G||f("button",{children:"trace"}),onFeatureAdded:ae}),X(Ue,{id:"naksha-gmaps-draw",mapContainerStyle:I||{height:"100%",width:"100%"},zoom:ne.zoom,center:ne.center,options:re,ref:A,onLoad:Re,children:[s&&f(Z,{onClick:be}),!l&&f(Be,{options:{controls:[p.POINT,p.POLYGON,p.LINESTRING],drawingMode:o||p.POLYGON,featureFactory:ae,...z||{}}})]})]})})});export{p as GMAP_FEATURE_TYPES,_t as NakshaGmapsDraw};

package/package.json

@@ -1,10 +1,18 @@
 {
   "name": "@biodiv-platform/naksha-gmaps-draw",
-  "version": "4.5.3",
+  "version": "4.5.4",
+  "type": "module",
   "author": "harshzalavadiya",
-  "main": "./dist/index.js",
-  "module": "./dist/esm/index.js",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
   "sideEffects": false,
   "license": "Apache-2.0",
   "repository": "strandls/naksha-components-react",
@@ -13,27 +21,31 @@
   ],
   "scripts": {
     "clean": "rm -rf node_modules dist .turbo",
-    "build": "tsup src/index.tsx --legacy-output --minify --format esm,cjs --dts --external react",
-    "dev": "tsup src/index.tsx --legacy-output --format esm,cjs --watch --dts --external react"
+    "build": "tsup src/index.tsx --format esm,cjs --dts --minify --external react",
+    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react"
   },
   "peerDependencies": {
-    "@react-google-maps/api": "^2.12.0",
+    "@react-google-maps/api": ">=2.12.0",
     "react": ">=18.2.0",
-    "react-map-gl": "^7.0.15"
+    "react-map-gl": ">=7.0.15"
   },
   "devDependencies": {
-    "@biodiv-platform/eslint-preset": "*",
-    "@biodiv-platform/tsconfig": "*",
-    "@react-google-maps/api": "^2.12.0",
-    "@types/react": "^18.0.13",
-    "@types/react-dom": "^18.0.5",
-    "react": ">=18.2.0",
-    "react-map-gl": "^7.0.15",
-    "tsup": "^6.1.2",
-    "typescript": "^4.7.3"
+    "@biodiv-platform/eslint-preset": "workspace:*",
+    "@biodiv-platform/tsconfig": "workspace:*",
+    "@react-google-maps/api": "^2.20.8",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "react": "^19.3.1",
+    "react-map-gl": "^8.1.3",
+    "tsup": "^9.0.0",
+    "typescript": "^5.8.3"
   },
   "dependencies": {
-    "@biodiv-platform/naksha-commons": "*",
-    "@turf/bbox": "^6.5.0"
+    "@biodiv-platform/naksha-commons": "workspace:*",
+    "@turf/bbox": "^7.4.0",
+    "boundingbox": "^1.4.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
-}
+}

package/dist/esm/index.js

@@ -1 +0,0 @@
-import{GMAPS_LIBRARIES as he,mapboxToGmapsViewState as We}from"@biodiv-platform/naksha-commons";import{Data as Ve,GoogleMap as je,LoadScriptNext as He}from"@react-google-maps/api";import xe,{useEffect as Ee,useMemo as Ze,useReducer as Ke,useRef as qe,useState as Qe}from"react";import{GMAPS_AUTOCOMPLETE_FIELDS as Re}from"@biodiv-platform/naksha-commons";import{Autocomplete as Oe}from"@react-google-maps/api";import{useState as Fe}from"react";import Le from"@turf/bbox";var l={POINT:"Point",POLYGON:"Polygon",LINESTRING:"LineString",RECTANGLE:"Rectangle",RAW:"Raw",NONE:null},re={mapTypeControlOptions:{position:10}};var ae=t=>({type:l.POINT,properties:{id:new Date().getTime(),name:t.name,formatted_address:t.formatted_address},coordinates:Object.values(t.geometry.location.toJSON()).reverse()}),ie=t=>{let n=new Date().getTime();switch(t.getType()){case l.POINT:return{type:l.POINT,properties:{id:n},coordinates:Object.values(t.get().toJSON()).reverse()};case l.POLYGON:{let e=[],o=r=>e.push([r.lng(),r.lat()]);return t.forEachLatLng(o),e.push(e[0]),{type:l.POLYGON,properties:{id:n},coordinates:[e]}}case l.RAW:{let e=t.data;return e.push(e[0]),{type:l.POLYGON,properties:{id:n},coordinates:[e]}}case l.LINESTRING:{let e=[],o=r=>e.push([r.lng(),r.lat()]);return t.forEachLatLng(o),{type:l.LINESTRING,properties:{id:n},coordinates:e}}default:return null}},se=t=>{let n=(t||[]).filter(o=>o);return n.length===0?!1:{type:"FeatureCollection",features:n.map(o=>{if(Array.isArray(o)&&o.length>0&&o[0].isGeojson){let r=o[0];return{type:"Feature",properties:r.properties||{},geometry:r.geometry||null}}else return{type:"Feature",properties:{},geometry:o}})}},le=t=>{let n=Le(t);return{east:n[2],north:n[3],south:n[1],west:n[0]}};import{jsx as Ne}from"react/jsx-runtime";function H({InputComponent:t,addFeature:n,gmapRegion:e}){let[o,r]=Fe();return Ne(Oe,{onLoad:i=>{r(i)},fields:Re,onPlaceChanged:()=>{let i=ae(o==null?void 0:o.getPlace());n(i)},options:e?{componentRestrictions:{country:e}}:{},children:t})}import{jsx as W}from"react/jsx-runtime";var Ce={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 Z({onClick:t}){return W("button",{type:"button",title:"Clear",onClick:t,style:Ce,children:W("svg",{viewBox:"0 0 24 24",width:"12",height:"12",children:W("g",{fill:"#E53E3E",children:W("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 P={ADD:"add",CLEAR:"clear",REPLACE:"replace"};function pe(t,{action:n,data:e,isMultiple:o}){switch(n){case P.ADD:return o?[...t||[],e]:[e];case P.CLEAR:return[];case P.REPLACE:return e;default:return t}}import we,{useEffect as De,useState as ue}from"react";import{useState as ce,useEffect as be}from"react";var Ge={enableHighAccuracy:!1,timeout:1/0,maximumAge:0},de=(t,n=Ge)=>{let[e,o]=ce(),[r,d]=ce(),p=({coords:a})=>{o([a.longitude,a.latitude])},i=a=>{d(a.message)};return be(()=>{if(!navigator||!navigator.geolocation){d("Geolocation is not supported");return}let a=null;return t?a=navigator.geolocation.watchPosition(p,i,n):a&&navigator.geolocation.clearWatch(a),()=>a&&navigator.geolocation.clearWatch(a)},[n,t]),{position:e,error:r}};import{jsx as Me}from"react/jsx-runtime";function K({TraceButtonComponent:t,onFeatureAdded:n}){let[e,o]=ue([]),[r,d]=ue(!1),{position:p}=de(r);De(()=>{r&&p&&o([...e,p])},[r,p]);let i=()=>{r?(d(!1),n({getType:()=>l.RAW,data:[...e]}),o([])):d(!0)};return Me("div",{children:we.cloneElement(t,{onClick:i,isTracking:r})})}import ge,{useState as Ue}from"react";import z,{useRef as ke,useState as q}from"react";import{jsx as M,jsxs as J}from"react/jsx-runtime";var ze=({addFeature:t,InputComponent:n,ButtonComponent:e,LocationIcon:o,SuccessIcon:r,FailureIcon:d})=>{let p=ke(null),[i,a]=q(!0),[g,m]=q(""),[u,T]=q([]),L=()=>{var c,C,b;try{let E=(C=(c=p.current)==null?void 0:c.value)!=null?C:"";if(!E.trim()){a(!1),m("Invalid Format. Enter Latitude, Longitude.");return}let G=(b=E.split(",").map(Number))==null?void 0:b.reverse();if(!R(G)){a(!1),m("Invalid Format. Enter Latitude, Longitude.");return}let h={type:l.POINT,properties:{id:new Date().getTime(),name:E,formatted_address:E},coordinates:G};t(h),T(k=>[...k,h]),p.current&&(p.current.value=""),a(!0),m("Point added successfully")}catch{a(!1)}finally{setTimeout(()=>{m(""),a(!0)},3e3)}},R=c=>Array.isArray(c)&&c.length===2&&!isNaN(c[0])&&!isNaN(c[1])&&typeof c[0]=="number"&&typeof c[1]=="number";return J("div",{style:{display:"flex",flexDirection:"column",alignItems:"flex-start"},children:[M("h1",{style:{marginBottom:"10px",fontWeight:"bold",fontSize:"1.25rem"},children:"Point"}),J("div",{style:{display:"flex",alignItems:"center"},children:[z.cloneElement(n,{ref:p,width:"300px"}),z.cloneElement(e,{onClick:L,type:"button",marginLeft:"10px"})]}),g&&J("div",{style:{fontWeight:"bold",color:i?"green":"red",marginTop:"10px",display:"flex",alignItems:"center"},children:[i?M("span",{style:{marginRight:"5px",fontSize:"1.25rem"},children:z.cloneElement(r,{boxSize:6})}):M("span",{style:{marginRight:"5px",fontSize:"1.25rem",color:"red"},children:z.cloneElement(d,{boxSize:4})}),g]}),u.length>0&&J("div",{style:{marginTop:"10px",paddingLeft:"15px"},children:[M("div",{style:{fontSize:"sm"},children:"Added Points:"}),M("ul",{style:{listStyleType:"none",padding:"0"},children:u.map(c=>J("li",{style:{display:"flex",alignItems:"center",marginBottom:"5px"},children:[z.cloneElement(o,{boxSize:6,marginRight:2,color:"teal"}),M("span",{style:{overflow:"hidden",whiteSpace:"pre-wrap",textOverflow:"ellipsis",maxWidth:"300px"},children:c.properties.name})]},c.properties.id))})]})]})},me=ze;import _,{useState as V,useRef as Je}from"react";import{Fragment as Be,jsx as y,jsxs as N}from"react/jsx-runtime";var _e=({addFeature:t,ButtonComponent:n,FileIcon:e,SuccessIcon:o,FailureIcon:r,DeleteIcon:d})=>{let[p,i]=V(!0),[a,g]=V(""),[m,u]=V([]),[T,L]=V([]),R=Je(null),c=s=>{s.preventDefault()},C=s=>{s.preventDefault()},b=s=>{s.preventDefault();let x=Array.from(s.dataTransfer.files);u(x)},E=()=>{let s=Array.from(R.current.files);u(s)},G=()=>{try{m.forEach(s=>{let x=new FileReader;x.onabort=()=>h("File reading was aborted. Please try again."),x.onerror=()=>h("File reading has failed. Please try again."),x.onload=()=>{let w=x.result;if(w){let j=typeof w=="string"?w:new TextDecoder().decode(w);try{let O=JSON.parse(j);(Array.isArray(O.features)?O.features.map(F=>({...F,isGeojson:!0})):[{...O,isGeojson:!0}]).forEach(F=>{t([F])}),g("Geojson added successfully"),i(!0),L(F=>[...F,{name:s.name}]),u([])}catch(O){console.error(O),h("Upload failed. Invalid GeoJSON format.")}}else h("File reading result is null.")},x.readAsText(s)})}catch(s){console.error(s),h("File upload failed. Please try again.")}finally{setTimeout(()=>{g(""),i(!0)},2e3)}},h=s=>{g(s),i(!1)},k=()=>{u([])};return N("div",{style:{display:"flex",flexDirection:"column",alignItems:"flex-start",marginTop:"10px"},onDragEnter:c,onDragOver:C,onDrop:b,children:[y("h1",{style:{marginBottom:"10px",fontWeight:"bold",fontSize:"1.25rem"},children:"GeoJSON"}),N("div",{style:{display:"flex",flexDirection:"row",alignItems:"center"},children:[N("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:()=>R.current.click(),children:[y("input",{type:"file",ref:R,onChange:E,style:{display:"none"}}),y("div",{style:{display:"flex",alignItems:"center"},children:m.length>0?N("div",{style:{marginLeft:"10px",display:"flex",alignItems:"center"},children:[y("div",{style:{marginTop:"10px",overflow:"hidden",whiteSpace:"pre-wrap",textOverflow:"ellipsis",maxWidth:"200px"},children:m[0].name}),y("div",{style:{color:"red",marginLeft:"10px",marginTop:"10px",cursor:"pointer"},onClick:k,children:_.cloneElement(d,{boxSize:6})})]}):y(Be,{children:y("div",{children:"Drag 'n' drop GeoJSON file here, or click to select a file"})})})]}),_.cloneElement(n,{type:"button",marginLeft:"30px",style:{paddingLeft:"15px"},onClick:G})]}),a&&N("div",{style:{fontWeight:"bold",color:p?"green":"red",marginTop:"10px",display:"flex",alignItems:"center"},children:[p?y("span",{style:{marginRight:"5px",fontSize:"1.25rem"},children:_.cloneElement(o,{boxSize:6})}):y("span",{style:{marginRight:"5px",fontSize:"1.25rem",color:"red"},children:_.cloneElement(r,{boxSize:4})}),a]}),T.length>0&&N("div",{style:{marginTop:"10px",paddingLeft:"15px"},children:[y("div",{style:{fontSize:"sm"},children:"Added GeoJSONs:"}),y("ul",{style:{listStyleType:"none",padding:"0"},children:T.map((s,x)=>N("li",{style:{display:"flex",alignItems:"center"},children:[_.cloneElement(e,{boxSize:6,marginRight:2}),y("div",{style:{marginTop:"10px",overflow:"hidden",whiteSpace:"pre-wrap",textOverflow:"ellipsis",maxWidth:"300px"},children:s.name})]},x))})]})]})},fe=_e;import{jsx as ye,jsxs as Ye}from"react/jsx-runtime";function Q({ButtonComponent:t,ModalComponent:n,addFeature:e,InputComponent:o,ButtonComponentModal:r,DeleteIcon:d,LocationIcon:p,FileIcon:i,SuccessIcon:a,FailureIcon:g}){let[m,u]=Ue(!1),T=()=>{u(!1)},L=()=>{u(!0)};return Ye("div",{style:{display:"flex"},children:[ge.cloneElement(n,{isOpen:m,onClose:T,nakshaImport:ye(me,{addFeature:e,InputComponent:o,ButtonComponent:t,LocationIcon:p,SuccessIcon:a,FailureIcon:g}),geoJSONImport:ye(fe,{addFeature:e,ButtonComponent:t,DeleteIcon:d,FileIcon:i,SuccessIcon:a,FailureIcon:g})}),ge.cloneElement(r,{onClick:L,type:"button"})]})}import{Fragment as Xe,jsx as f,jsxs as X}from"react/jsx-runtime";var zt=xe.forwardRef(({defaultViewState:t,defaultDrawingMode:n,data:e,onDataChange:o,gmapAccessToken:r,isControlled:d,isReadOnly:p,isMultiple:i,isImport:a,isAutocomplete:g,gmapRegion:m,autoCompleteRegion:u,mapStyle:T,importInputComponent:L,importButtonComponent:R,autocompleteComponent:c,showTrace:C,traceButtonComponent:b,maxZoom:E,options:G,importModalComponent:h,isOpen:k,onClose:s,importButtonComponentModal:x,importDeleteIcon:w,importLocationIcon:j,importFileIcon:O,importSuccessIcon:$,importFailureIcon:F},ee)=>{let A=qe(null),[B,U]=Ke(pe,e),[te,Ie]=Qe(),oe=Ze(()=>We(t),[t]),Se=()=>{A.current.state.map.data.forEach(function(D){A.current.state.map.data.remove(D)});let I=se(B);if(I){I&&A.current.state.map.data.addGeoJson(I);let D=le(I);D&&A.current.state.map.fitBounds(D),E&&google.maps.event.addListenerOnce(A.current.state.map,"idle",function(){let Pe=A.current.state.map.getZoom();A.current.state.map.setZoom(Math.min(E,Pe))})}};Ee(()=>{te&&(o&&o(B),ee&&(ee.current={addFeature:Y,replaceFeature:ve}),Se())},[te,B]),Ee(()=>{d&&JSON.stringify(B)!==JSON.stringify(e)&&U({action:P.REPLACE,data:e})},[e]);let Y=I=>{U({action:P.ADD,data:I,isMultiple:i})},ve=I=>{U({action:P.REPLACE,data:[I]})},ne=I=>{let D=ie(I);Y(D)},Te=()=>{U({action:P.CLEAR})},Ae=()=>Ie(!0);return f(He,{googleMapsApiKey:r,region:m,libraries:g?he.AUTOCOMPLETE:he.DEFAULT,children:X(Xe,{children:[X("div",{style:{display:"flex"},children:[g&&f("div",{style:{width:"500px"},children:f(H,{InputComponent:c||f("input",{}),addFeature:Y,gmapRegion:u!=null?u:m})}),f("div",{style:{flex:"1"}}),f(Q,{ButtonComponent:R||f("button",{children:"add"}),ModalComponent:h&&xe.cloneElement(h,{isOpen:k,onClose:s}),InputComponent:L||f("input",{}),addFeature:Y,ButtonComponentModal:x||f("button",{children:"add"}),DeleteIcon:w,LocationIcon:j,FileIcon:O,SuccessIcon:$,FailureIcon:F})]}),C&&f(K,{TraceButtonComponent:b||f("button",{children:"trace"}),onFeatureAdded:ne}),X(je,{id:"naksha-gmaps-draw",mapContainerStyle:T||{height:"100%",width:"100%"},zoom:oe.zoom,center:oe.center,options:re,ref:A,onLoad:Ae,children:[i&&f(Z,{onClick:Te}),!p&&f(Ve,{options:{controls:[l.POINT,l.POLYGON,l.LINESTRING],drawingMode:n||l.POLYGON,featureFactory:ne,...G||{}}})]})]})})});export{l as GMAP_FEATURE_TYPES,zt as NakshaGmapsDraw};