@biodiv-platform/naksha-gmaps-draw 4.4.8 → 4.4.9

package/dist/esm/index.js

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

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+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;
+}
+declare const NakshaGmapsDraw: React.ForwardRefExoticComponent<NakshaGmapsDrawProps & React.RefAttributes<unknown>>;
+
+export { GMAP_FEATURE_TYPES, NakshaGmapsDraw, NakshaGmapsDrawProps };

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@biodiv-platform/naksha-gmaps-draw",
-  "version": "4.4.8",
+  "version": "4.4.9",
   "author": "harshzalavadiya",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",