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

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