@biodiv-platform/naksha-gmaps-draw 4.5.2 → 4.5.3-beta.2

package/dist/esm/index.js

@@ -1 +1 @@
-var st=Object.defineProperty;var v=Object.getOwnPropertySymbols;var it=Object.prototype.hasOwnProperty,ct=Object.prototype.propertyIsEnumerable;var x=(e,o,t)=>o in e?st(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,w=(e,o)=>{for(var t in o||(o={}))it.call(o,t)&&x(e,t,o[t]);if(v)for(var t of v(o))ct.call(o,t)&&x(e,t,o[t]);return e};import{GMAPS_LIBRARIES as H,mapboxToGmapsViewState as yt}from"@biodiv-platform/naksha-commons";import{Data as Nt,GoogleMap as Ot,LoadScriptNext as St}from"@react-google-maps/api";import Ct,{useEffect as V,useMemo as Rt,useReducer as Gt,useRef as It,useState as bt}from"react";import{GMAPS_AUTOCOMPLETE_FIELDS as ut}from"@biodiv-platform/naksha-commons";import{Autocomplete as lt}from"@react-google-maps/api";import{useState as dt}from"react";import pt from"@turf/bbox";var r={POINT:"Point",POLYGON:"Polygon",LINESTRING:"LineString",RECTANGLE:"Rectangle",RAW:"Raw",NONE:null},M={mapTypeControlOptions:{position:10}};var _=e=>({type:r.POINT,properties:{id:new Date().getTime(),name:e.name,formatted_address:e.formatted_address},coordinates:Object.values(e.geometry.location.toJSON()).reverse()}),k=e=>{let o=new Date().getTime();switch(e.getType()){case r.POINT:return{type:r.POINT,properties:{id:o},coordinates:Object.values(e.get().toJSON()).reverse()};case r.POLYGON:{let t=[],a=n=>t.push([n.lng(),n.lat()]);return e.forEachLatLng(a),t.push(t[0]),{type:r.POLYGON,properties:{id:o},coordinates:[t]}}case r.RAW:{let t=e.data;return t.push(t[0]),{type:r.POLYGON,properties:{id:o},coordinates:[t]}}case r.LINESTRING:{let t=[],a=n=>t.push([n.lng(),n.lat()]);return e.forEachLatLng(a),{type:r.LINESTRING,properties:{id:o},coordinates:t}}default:return null}},D=e=>{let o=(e||[]).filter(t=>t);return o.length===0?!1:{type:"FeatureCollection",features:o.map(t=>({type:"Feature",properties:{},geometry:t}))}},Y=e=>{let o=pt(e);return{east:o[2],north:o[3],south:o[1],west:o[0]}};import{jsx as mt}from"react/jsx-runtime";function A({InputComponent:e,addFeature:o,gmapRegion:t}){let[a,n]=dt();return mt(lt,{onLoad:s=>{n(s)},fields:ut,onPlaceChanged:()=>{let s=_(a==null?void 0:a.getPlace());o(s)},options:t?{componentRestrictions:{country:t}}:{},children:e})}import{jsx as P}from"react/jsx-runtime";var ft={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 L({onClick:e}){return P("button",{type:"button",title:"Clear",onClick:e,style:ft,children:P("svg",{viewBox:"0 0 24 24",width:"12",height:"12",children:P("g",{fill:"#E53E3E",children:P("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"})})})})}import J,{useRef as gt}from"react";import{jsxs as Et}from"react/jsx-runtime";function y({addFeature:e,InputComponent:o,ButtonComponent:t}){let a=gt(),n=()=>{var c,p;try{let s=(c=a==null?void 0:a.current)==null?void 0:c.value,i=(p=s.split(",").map(Number))==null?void 0:p.reverse();e({type:r.POINT,properties:{id:new Date().getTime(),name:s,formatted_address:s},coordinates:i})}catch(s){console.error(s)}};return Et("div",{style:{display:"flex"},children:[J.cloneElement(o,{ref:a}),J.cloneElement(t,{onClick:n,type:"button"})]})}var m={ADD:"add",CLEAR:"clear",REPLACE:"replace"};function B(e,{action:o,data:t,isMultiple:a}){switch(o){case m.ADD:return a?[...e||[],t]:[t];case m.CLEAR:return[];case m.REPLACE:return t;default:return e}}import Tt,{useEffect as At,useState as W}from"react";import{useState as z,useEffect as ht}from"react";var Pt={enableHighAccuracy:!1,timeout:1/0,maximumAge:0},U=(e,o=Pt)=>{let[t,a]=z(),[n,c]=z(),p=({coords:i})=>{a([i.longitude,i.latitude])},s=i=>{c(i.message)};return ht(()=>{if(!navigator||!navigator.geolocation){c("Geolocation is not supported");return}let i=null;return e?i=navigator.geolocation.watchPosition(p,s,o):i&&navigator.geolocation.clearWatch(i),()=>i&&navigator.geolocation.clearWatch(i)},[o,e]),{position:t,error:n}};import{jsx as Lt}from"react/jsx-runtime";function N({TraceButtonComponent:e,onFeatureAdded:o}){let[t,a]=W([]),[n,c]=W(!1),{position:p}=U(n);At(()=>{n&&p&&a([...t,p])},[n,p]);let s=()=>{n?(c(!1),o({getType:()=>r.RAW,data:[...t]}),a([])):c(!0)};return Lt("div",{children:Tt.cloneElement(e,{onClick:s,isTracking:n})})}import{Fragment as Ft,jsx as l,jsxs as O}from"react/jsx-runtime";var fe=Ct.forwardRef(({defaultViewState:e,defaultDrawingMode:o,data:t,onDataChange:a,gmapAccessToken:n,isControlled:c,isReadOnly:p,isMultiple:s,isImport:i,isAutocomplete:S,gmapRegion:C,autoCompleteRegion:T,mapStyle:Z,importInputComponent:K,importButtonComponent:q,autocompleteComponent:Q,showTrace:X,traceButtonComponent:$,maxZoom:R,options:j},G)=>{let d=It(null),[g,E]=Gt(B,t),[I,tt]=bt(),b=Rt(()=>yt(e),[e]),et=()=>{d.current.state.map.data.forEach(function(f){d.current.state.map.data.remove(f)});let u=D(g);if(u){u&&d.current.state.map.data.addGeoJson(u);let f=Y(u);f&&d.current.state.map.fitBounds(f),R&&google.maps.event.addListenerOnce(d.current.state.map,"idle",function(){let rt=d.current.state.map.getZoom();d.current.state.map.setZoom(Math.min(R,rt))})}};V(()=>{I&&(a&&a(g),G&&(G.current={addFeature:h,replaceFeature:ot}),et())},[I,g]),V(()=>{c&&JSON.stringify(g)!==JSON.stringify(t)&&E({action:m.REPLACE,data:t})},[t]);let h=u=>{E({action:m.ADD,data:u,isMultiple:s})},ot=u=>{E({action:m.REPLACE,data:[u]})},F=u=>{let f=k(u);h(f)},at=()=>{E({action:m.CLEAR})},nt=()=>tt(!0);return l(St,{googleMapsApiKey:n,region:C,libraries:S?H.AUTOCOMPLETE:H.DEFAULT,children:O(Ft,{children:[O("div",{className:"map-toolbar",style:{display:"flex"},children:[S&&l(A,{InputComponent:Q||l("input",{}),addFeature:h,gmapRegion:T!=null?T:C}),i&&l(y,{InputComponent:K||l("input",{}),ButtonComponent:q||l("button",{children:"import"}),addFeature:h})]}),X&&l(N,{TraceButtonComponent:$||l("button",{children:"trace"}),onFeatureAdded:F}),O(Ot,{id:"naksha-gmaps-draw",mapContainerStyle:Z||{height:"100%",width:"100%"},zoom:b.zoom,center:b.center,options:M,ref:d,onLoad:nt,children:[s&&l(L,{onClick:at}),!p&&l(Nt,{options:w({controls:[r.POINT,r.POLYGON,r.LINESTRING],drawingMode:o||r.POLYGON,featureFactory:F},j||{})})]})]})})});export{r as GMAP_FEATURE_TYPES,fe as NakshaGmapsDraw};
+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};

package/dist/index.d.ts

@@ -30,6 +30,15 @@ interface NakshaGmapsDrawProps {
     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>>;
 

package/dist/index.js

@@ -1 +1 @@
-"use strict";var ht=Object.create;var P=Object.defineProperty;var Pt=Object.getOwnPropertyDescriptor;var Tt=Object.getOwnPropertyNames,Y=Object.getOwnPropertySymbols,At=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty,Lt=Object.prototype.propertyIsEnumerable;var J=(e,o,t)=>o in e?P(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,z=(e,o)=>{for(var t in o||(o={}))B.call(o,t)&&J(e,t,o[t]);if(Y)for(var t of Y(o))Lt.call(o,t)&&J(e,t,o[t]);return e};var yt=(e,o)=>{for(var t in o)P(e,t,{get:o[t],enumerable:!0})},U=(e,o,t,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of Tt(o))!B.call(e,n)&&n!==t&&P(e,n,{get:()=>o[n],enumerable:!(a=Pt(o,n))||a.enumerable});return e};var C=(e,o,t)=>(t=e!=null?ht(At(e)):{},U(o||!e||!e.__esModule?P(t,"default",{value:e,enumerable:!0}):t,e)),Nt=e=>U(P({},"__esModule",{value:!0}),e);var Rt={};yt(Rt,{GMAP_FEATURE_TYPES:()=>r,NakshaGmapsDraw:()=>Ct});module.exports=Nt(Rt);var y=require("@biodiv-platform/naksha-commons"),h=require("@react-google-maps/api"),p=C(require("react"));var Q=require("@biodiv-platform/naksha-commons"),X=require("@react-google-maps/api"),$=require("react");var H=C(require("@turf/bbox"));var r={POINT:"Point",POLYGON:"Polygon",LINESTRING:"LineString",RECTANGLE:"Rectangle",RAW:"Raw",NONE:null},W={mapTypeControlOptions:{position:10}};var V=e=>({type:r.POINT,properties:{id:new Date().getTime(),name:e.name,formatted_address:e.formatted_address},coordinates:Object.values(e.geometry.location.toJSON()).reverse()}),Z=e=>{let o=new Date().getTime();switch(e.getType()){case r.POINT:return{type:r.POINT,properties:{id:o},coordinates:Object.values(e.get().toJSON()).reverse()};case r.POLYGON:{let t=[],a=n=>t.push([n.lng(),n.lat()]);return e.forEachLatLng(a),t.push(t[0]),{type:r.POLYGON,properties:{id:o},coordinates:[t]}}case r.RAW:{let t=e.data;return t.push(t[0]),{type:r.POLYGON,properties:{id:o},coordinates:[t]}}case r.LINESTRING:{let t=[],a=n=>t.push([n.lng(),n.lat()]);return e.forEachLatLng(a),{type:r.LINESTRING,properties:{id:o},coordinates:t}}default:return null}},K=e=>{let o=(e||[]).filter(t=>t);return o.length===0?!1:{type:"FeatureCollection",features:o.map(t=>({type:"Feature",properties:{},geometry:t}))}},q=e=>{let o=(0,H.default)(e);return{east:o[2],north:o[3],south:o[1],west:o[0]}};var j=require("react/jsx-runtime");function G({InputComponent:e,addFeature:o,gmapRegion:t}){let[a,n]=(0,$.useState)();return(0,j.jsx)(X.Autocomplete,{onLoad:i=>{n(i)},fields:Q.GMAPS_AUTOCOMPLETE_FIELDS,onPlaceChanged:()=>{let i=V(a==null?void 0:a.getPlace());o(i)},options:t?{componentRestrictions:{country:t}}:{},children:e})}var T=require("react/jsx-runtime"),Ot={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 I({onClick:e}){return(0,T.jsx)("button",{type:"button",title:"Clear",onClick:e,style:Ot,children:(0,T.jsx)("svg",{viewBox:"0 0 24 24",width:"12",height:"12",children:(0,T.jsx)("g",{fill:"#E53E3E",children:(0,T.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 A=C(require("react"));var tt=require("react/jsx-runtime");function b({addFeature:e,InputComponent:o,ButtonComponent:t}){let a=(0,A.useRef)(),n=()=>{var u,l;try{let i=(u=a==null?void 0:a.current)==null?void 0:u.value,c=(l=i.split(",").map(Number))==null?void 0:l.reverse();e({type:r.POINT,properties:{id:new Date().getTime(),name:i,formatted_address:i},coordinates:c})}catch(i){console.error(i)}};return(0,tt.jsxs)("div",{style:{display:"flex"},children:[A.default.cloneElement(o,{ref:a}),A.default.cloneElement(t,{onClick:n,type:"button"})]})}var f={ADD:"add",CLEAR:"clear",REPLACE:"replace"};function et(e,{action:o,data:t,isMultiple:a}){switch(o){case f.ADD:return a?[...e||[],t]:[t];case f.CLEAR:return[];case f.REPLACE:return t;default:return e}}var g=C(require("react"));var L=require("react"),St={enableHighAccuracy:!1,timeout:1/0,maximumAge:0},ot=(e,o=St)=>{let[t,a]=(0,L.useState)(),[n,u]=(0,L.useState)(),l=({coords:c})=>{a([c.longitude,c.latitude])},i=c=>{u(c.message)};return(0,L.useEffect)(()=>{if(!navigator||!navigator.geolocation){u("Geolocation is not supported");return}let c=null;return e?c=navigator.geolocation.watchPosition(l,i,o):c&&navigator.geolocation.clearWatch(c),()=>c&&navigator.geolocation.clearWatch(c)},[o,e]),{position:t,error:n}};var at=require("react/jsx-runtime");function F({TraceButtonComponent:e,onFeatureAdded:o}){let[t,a]=(0,g.useState)([]),[n,u]=(0,g.useState)(!1),{position:l}=ot(n);(0,g.useEffect)(()=>{n&&l&&a([...t,l])},[n,l]);let i=()=>{n?(u(!1),o({getType:()=>r.RAW,data:[...t]}),a([])):u(!0)};return(0,at.jsx)("div",{children:g.default.cloneElement(e,{onClick:i,isTracking:n})})}var s=require("react/jsx-runtime"),Ct=p.default.forwardRef(({defaultViewState:e,defaultDrawingMode:o,data:t,onDataChange:a,gmapAccessToken:n,isControlled:u,isReadOnly:l,isMultiple:i,isImport:c,isAutocomplete:v,gmapRegion:x,autoCompleteRegion:R,mapStyle:nt,importInputComponent:rt,importButtonComponent:st,autocompleteComponent:it,showTrace:ct,traceButtonComponent:pt,maxZoom:w,options:ut},M)=>{let m=(0,p.useRef)(null),[N,O]=(0,p.useReducer)(et,t),[_,lt]=(0,p.useState)(),k=(0,p.useMemo)(()=>(0,y.mapboxToGmapsViewState)(e),[e]),dt=()=>{m.current.state.map.data.forEach(function(E){m.current.state.map.data.remove(E)});let d=K(N);if(d){d&&m.current.state.map.data.addGeoJson(d);let E=q(d);E&&m.current.state.map.fitBounds(E),w&&google.maps.event.addListenerOnce(m.current.state.map,"idle",function(){let Et=m.current.state.map.getZoom();m.current.state.map.setZoom(Math.min(w,Et))})}};(0,p.useEffect)(()=>{_&&(a&&a(N),M&&(M.current={addFeature:S,replaceFeature:mt}),dt())},[_,N]),(0,p.useEffect)(()=>{u&&JSON.stringify(N)!==JSON.stringify(t)&&O({action:f.REPLACE,data:t})},[t]);let S=d=>{O({action:f.ADD,data:d,isMultiple:i})},mt=d=>{O({action:f.REPLACE,data:[d]})},D=d=>{let E=Z(d);S(E)},ft=()=>{O({action:f.CLEAR})},gt=()=>lt(!0);return(0,s.jsx)(h.LoadScriptNext,{googleMapsApiKey:n,region:x,libraries:v?y.GMAPS_LIBRARIES.AUTOCOMPLETE:y.GMAPS_LIBRARIES.DEFAULT,children:(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)("div",{className:"map-toolbar",style:{display:"flex"},children:[v&&(0,s.jsx)(G,{InputComponent:it||(0,s.jsx)("input",{}),addFeature:S,gmapRegion:R!=null?R:x}),c&&(0,s.jsx)(b,{InputComponent:rt||(0,s.jsx)("input",{}),ButtonComponent:st||(0,s.jsx)("button",{children:"import"}),addFeature:S})]}),ct&&(0,s.jsx)(F,{TraceButtonComponent:pt||(0,s.jsx)("button",{children:"trace"}),onFeatureAdded:D}),(0,s.jsxs)(h.GoogleMap,{id:"naksha-gmaps-draw",mapContainerStyle:nt||{height:"100%",width:"100%"},zoom:k.zoom,center:k.center,options:W,ref:m,onLoad:gt,children:[i&&(0,s.jsx)(I,{onClick:ft}),!l&&(0,s.jsx)(h.Data,{options:z({controls:[r.POINT,r.POLYGON,r.LINESTRING],drawingMode:o||r.POLYGON,featureFactory:D},ut||{})})]})]})})});0&&(module.exports={GMAP_FEATURE_TYPES,NakshaGmapsDraw});
+"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});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@biodiv-platform/naksha-gmaps-draw",
-  "version": "4.5.2",
+  "version": "4.5.3-beta.2",
   "author": "harshzalavadiya",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",
@@ -36,4 +36,4 @@
     "@biodiv-platform/naksha-commons": "*",
     "@turf/bbox": "^6.5.0"
   }
-}
+}