@biodiv-platform/naksha-maplibre-draw 5.0.11 → 5.0.12

package/dist/esm/index.js

@@ -1 +1 @@
-var we=Object.defineProperty,xe=Object.defineProperties;var ye=Object.getOwnPropertyDescriptors;var A=Object.getOwnPropertySymbols;var be=Object.prototype.hasOwnProperty,ve=Object.prototype.propertyIsEnumerable;var Y=(t,o,e)=>o in t?we(t,o,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[o]=e,w=(t,o)=>{for(var e in o||(o={}))be.call(o,e)&&Y(t,e,o[e]);if(A)for(var e of A(o))ve.call(o,e)&&Y(t,e,o[e]);return t},I=(t,o)=>xe(t,ye(o));import{FullscreenControl as Ze,NavigationControl as Ue}from"maplibre-gl";import{useRef as J,useState as T,useEffect as pe,useCallback as ue}from"react";import{TerraDraw as Se,TerraDrawSelectMode as Me,TerraDrawPointMode as ke,TerraDrawLineStringMode as Ce,TerraDrawPolygonMode as Ie,TerraDrawCircleMode as Pe,TerraDrawFreehandMode as Be,ValidateNotSelfIntersecting as F,TerraDrawRectangleMode as De}from"terra-draw";import{TerraDrawMapLibreGLAdapter as Le}from"terra-draw-maplibre-gl-adapter";import{tw as Ne}from"twind";import Te from"react";import{jsx as L}from"react/jsx-runtime";function _(t){return new Se({tracked:!0,adapter:new Le({map:t,coordinatePrecision:9}),modes:[new Me({flags:{polygon:{feature:{scaleable:!0,rotateable:!0,draggable:!0,coordinates:{midpoints:!0,draggable:!0,deletable:!0}}},linestring:{feature:{draggable:!0,coordinates:{midpoints:!0,draggable:!0,deletable:!0}}},circle:{feature:{draggable:!0}},point:{feature:{draggable:!0}},rectangle:{feature:{draggable:!0,coordinates:{resizable:"opposite"}}},freehand:{feature:{draggable:!0}}}}),new ke,new Ce({validation:(o,{updateType:e})=>e==="finish"||e==="commit"?F(o):{valid:!0}}),new De,new Ie({pointerDistance:30,validation:(o,{updateType:e})=>e==="finish"||e==="commit"?F(o):{valid:!0}}),new Pe,new Be({pointerDistance:5,validation:o=>F(o)})]})}var G=t=>t.map(o=>{var a,l;if((a=o.properties)!=null&&a.mode)return o;let e=(l=o.geometry)==null?void 0:l.type,n=e==="Point"?"point":e==="Polygon"?"polygon":e==="LineString"?"linestring":"unknown";return I(w({},o),{properties:I(w({},o.properties),{mode:n})})});var N=Te.forwardRef((t,o)=>L("button",w({ref:o,type:"button",className:Ne`h-8 px-3 py-2 rounded-md focus:outline-none  cursor-pointer text-md flex align-middle items-center gap-2 bg-gray-100 hover:bg-gray-200 text-gray-700 disabled:cursor-not-allowed disabled:bg-gray-100! disabled:opacity-50`},t))),$=({currentStyleIdx:t,onStyleChange:o,mapStyles:e})=>L("div",{style:{position:"absolute",left:12,bottom:12,background:"rgba(255,255,255,0.95)",padding:"8px",borderRadius:"6px",zIndex:1e3,boxShadow:"0 2px 4px rgba(0,0,0,0.2)"},children:L("select",{value:t,onChange:n=>o(Number(n.target.value)),style:{fontSize:14,padding:"4px"},children:e.map((n,a)=>L("option",{value:a,children:n.text||`Style ${a+1}`},n.key||a))})});import{getRTLTextPluginStatus as Re,Map as Fe,setRTLTextPlugin as Ge}from"maplibre-gl";function q({containerId:t,latitude:o=0,longitude:e=0,zoom:n,pitch:a,bearing:l,mapstyle:d}){return Re()==="unavailable"&&Ge("https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js",!0),new Fe({container:t,style:d,center:{lat:o,lng:e},zoom:n,pitch:a,bearing:l})}import{useEffect as We,useState as ce,useCallback as O,useMemo as ze}from"react";import{jsx as i,jsxs as P}from"react/jsx-runtime";var K=()=>P("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[i("path",{d:"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"}),i("path",{d:"m15 5 4 4"})]}),Q=()=>P("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[i("path",{d:"m10 10-6.157 6.162a2 2 0 0 0-.5.833l-1.322 4.36a.5.5 0 0 0 .622.624l4.358-1.323a2 2 0 0 0 .83-.5L14 13.982"}),i("path",{d:"m12.829 7.172 4.359-4.346a1 1 0 1 1 3.986 3.986l-4.353 4.353"}),i("path",{d:"m15 5 4 4"}),i("path",{d:"m2 2 20 20"})]}),X=()=>P("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[i("line",{x1:"2",x2:"5",y1:"12",y2:"12"}),i("line",{x1:"19",x2:"22",y1:"12",y2:"12"}),i("line",{x1:"12",x2:"12",y1:"2",y2:"5"}),i("line",{x1:"12",x2:"12",y1:"19",y2:"22"}),i("circle",{cx:"12",cy:"12",r:"7"})]}),ee=()=>P("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[i("path",{d:"M12.586 12.586 19 19"}),i("path",{d:"M3.688 3.037a.497.497 0 0 0-.651.651l6.5 15.999a.501.501 0 0 0 .947-.062l1.569-6.083a2 2 0 0 1 1.448-1.479l6.124-1.579a.5.5 0 0 0 .063-.947z"})]}),te=()=>P("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[i("path",{d:"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"}),i("circle",{cx:"12",cy:"10",r:"3"})]}),oe=()=>i("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:i("line",{x1:"4",y1:"20",x2:"20",y2:"4"})}),re=()=>i("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:i("polygon",{points:"12,2 22,8 18,22 6,22 2,8"})}),ne=()=>i("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:i("rect",{x:"4",y:"4",width:"16",height:"16"})}),ie=()=>i("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:i("circle",{cx:"12",cy:"12",r:"10"})}),ae=()=>i("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:i("path",{d:"M3 16c1-3 4-5 7-4 3 1 5 3 7 2 2-1 3-4 1-6-1-2-4-2-6-1"})}),le=()=>i("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:i("path",{d:"M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"})});import{jsx as Ve}from"react/jsx-runtime";var Oe={display:"flex",justifyContent:"center",alignItems:"center",width:30,height:30,padding:0,borderRadius:4},Je=({mode:t,currentMode:o,onClick:e,icon:n,tooltip:a,disabled:l})=>Ve(N,{type:"button",title:a,disabled:l,onClick:()=>!l&&e(t!=null?t:""),style:I(w({},Oe),{backgroundColor:l?"#d3d3d3":o===t?"#02cf87":"#f0f0f0",cursor:l?"not-allowed":"pointer",opacity:l?.6:1,width:40,height:40}),children:n}),se=Je;import{jsx as c,jsxs as He}from"react/jsx-runtime";function Ee({mode:t,setMode:o,onClick:e,draw:n,onFeaturesChange:a,isMultiple:l=!0,autoFocus:d}){let[M,m]=ce(!1),[b,x]=ce(!1),u=O(()=>x(n.getSnapshot().length>0),[n]);We(()=>{if(!!n)return n.on("finish",u),n.on("change",u),u(),()=>{n.off("finish",u),n.off("change",u)}},[n,u]);let v=O(()=>{if(!("geolocation"in navigator)){alert("Geolocation is not supported in this browser.");return}navigator.geolocation.getCurrentPosition(s=>{let f={type:"Feature",geometry:{type:"Point",coordinates:[s.coords.longitude,s.coords.latitude]},properties:{mode:"point",source:"geolocation"}};l||n.clear(),n.addFeatures([f]),a==null||a(n.getSnapshot()),d==null||d([f])},s=>{alert("Error getting geolocation"),console.error(s)}),o("current-location")},[n,l,a,d]),B=O(()=>{n.clear(),x(!1),o("static"),a==null||a([])},[n,a]),k=ze(()=>[{icon:c(X,{}),mode:"current-location",onClick:v,tooltip:"Use current location"},{icon:c(ee,{}),mode:"select",onClick:e,tooltip:"Select"},{icon:c(te,{}),mode:"point",onClick:e,tooltip:"Point"},{icon:c(oe,{}),mode:"linestring",onClick:e,tooltip:"Linestring"},{icon:c(re,{}),mode:"polygon",onClick:e,tooltip:"Polygon"},{icon:c(ne,{}),mode:"rectangle",onClick:e,tooltip:"Reactangle"},{icon:c(ie,{}),mode:"circle",onClick:e,tooltip:"Circle"},{icon:c(ae,{}),mode:"freehand",onClick:e,tooltip:"Freehand"},{icon:c(le,{}),mode:"clear",onClick:B,tooltip:"Clear all features",disabled:!b}],[e,v,B,b]);return He("div",{style:{position:"absolute",top:10,left:10,display:"flex",flexDirection:"column",gap:6,zIndex:1e3,backgroundColor:"rgba(255,255,255,0.9)",padding:8,borderRadius:6,boxShadow:"0 2px 6px rgba(0,0,0,0.2)",maxWidth:"90vw"},children:[c(N,{onClick:()=>m(s=>!s),style:{display:"flex",justifyContent:"center",alignItems:"center",width:40,height:40,padding:0,borderRadius:4,backgroundColor:"#d3d3d3"},title:"Expand or collapse tools",children:M?c(Q,{}):c(K,{})}),M&&c("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(40px, 1fr))",gap:6,maxHeight:"200px",overflowY:"auto",paddingRight:1},className:"custom-scrollbar",children:k.map((s,S)=>c(se,{icon:s.icon,mode:s.mode,currentMode:t,onClick:s.onClick,tooltip:s.tooltip,disabled:s.disabled},S))})]})}var de=Ee;import je from"@turf/bbox";import{defaultMapStyles as Ae}from"@biodiv-platform/naksha-commons";import{jsx as ge,jsxs as _e}from"react/jsx-runtime";var Ye=t=>{var V,W;let o=J(null),[e,n]=T(),[a,l]=T("static"),[d,M]=T(),m=J(),{isMultiple:b,features:x=[],onFeaturesChange:u}=t,[v,B]=T((t==null?void 0:t.mapStyle)||0),k=(V=t.mapStyles)!=null?V:Ae,s=(W=k[v])==null?void 0:W.style,S=k[v],f=J([]),R=ue(r=>{if(!(r!=null&&r.length)||!e)return;let g=je({type:"FeatureCollection",features:r});e.fitBounds(g,{padding:40,duration:1e3,maxZoom:15})},[e]);pe(()=>{var h,D,C,y,z,E,H,Z,U,j;x.length>0&&(f.current=G(x));let r=q({containerId:"maplibre-map",latitude:(D=(h=t.defaultViewState)==null?void 0:h.latitude)!=null?D:0,longitude:(y=(C=t.defaultViewState)==null?void 0:C.longitude)!=null?y:0,zoom:(E=(z=t.defaultViewState)==null?void 0:z.zoom)!=null?E:0,pitch:(Z=(H=t.defaultViewState)==null?void 0:H.pitch)!=null?Z:0,bearing:(j=(U=t.defaultViewState)==null?void 0:U.bearing)!=null?j:0,mapstyle:s});"maxZoom"in S&&S.maxZoom&&r.setMaxZoom(S.maxZoom);let g=new Ue({showCompass:!0,showZoom:!0,visualizePitch:!0}),p=new Ze({});return r.addControl(g,"bottom-right"),r.addControl(p,"bottom-right"),r.once("style.load",()=>{n(r)}),()=>{if(m.current&&(f.current=m.current.getSnapshot()),m.current){try{m.current.stop()}catch(Ke){}m.current=void 0,M(void 0)}r&&(r.removeControl(g),r.removeControl(p),r.remove())}},[s]);let he=r=>r.filter(g=>g.geometry.type!=="Point"||g.properties.mode!=="static"&&g.properties.mode!=="select");pe(()=>{if(!e)return;let r=_(e);r.start(),m.current=r,M(r);let g=()=>{let p=r.getSnapshot(),h=he(p);if(!b&&h.length>1){let D=h.at(-1),C=h.slice(0,-1).map(y=>y.id).filter(y=>Boolean(y));if(C.length>0)try{r.removeFeatures(C)}catch(y){}h=[D]}u==null||u(h),R(h)};return r.on("finish",g),setTimeout(()=>{if(r.getSnapshot().length===0){let p=[];f.current.length>0?p=f.current:x.length>0&&(p=G(x)),!b&&p.length>1&&(p=[p.at(-1)]),p.length>0&&(r.addFeatures(p),R(p))}},100),()=>{r.off("finish",g)}},[e]);let fe=ue(r=>{d==null||d.setMode(r),l(r)},[d]);return _e("div",{ref:o,id:"maplibre-map",style:{width:"100%",height:"100%",position:"relative"},children:[ge($,{currentStyleIdx:v,onStyleChange:r=>{m.current&&(f.current=m.current.getSnapshot()),B(r),l("static")},mapStyles:k}),d&&ge(de,{mode:a,setMode:l,onClick:fe,draw:d,onFeaturesChange:u,isMultiple:b,autoFocus:R})]})},me=Ye;import{jsx as $e}from"react/jsx-runtime";var Nt=t=>$e(me,w({},t));export{Nt as NakshaMaplibreDraw};
+var ke=Object.defineProperty,Ce=Object.defineProperties;var Ie=Object.getOwnPropertyDescriptors;var X=Object.getOwnPropertySymbols;var Pe=Object.prototype.hasOwnProperty,Ne=Object.prototype.propertyIsEnumerable;var ee=(t,o,e)=>o in t?ke(t,o,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[o]=e,b=(t,o)=>{for(var e in o||(o={}))Pe.call(o,e)&&ee(t,e,o[e]);if(X)for(var e of X(o))Ne.call(o,e)&&ee(t,e,o[e]);return t},C=(t,o)=>Ce(t,Ie(o));var D=(t,o,e)=>new Promise((r,a)=>{var s=l=>{try{y(e.next(l))}catch(m){a(m)}},c=l=>{try{y(e.throw(l))}catch(m){a(m)}},y=l=>l.done?r(l.value):Promise.resolve(l.value).then(s,c);y((e=e.apply(t,o)).next())});import{useRef as V,useState as F,useEffect as ye,useCallback as xe}from"react";import{TerraDraw as Be,TerraDrawSelectMode as De,TerraDrawPointMode as Le,TerraDrawLineStringMode as Te,TerraDrawPolygonMode as Fe,TerraDrawCircleMode as Re,TerraDrawFreehandMode as Ge,ValidateNotSelfIntersecting as G,TerraDrawRectangleMode as Oe}from"terra-draw";import{TerraDrawMapLibreGLAdapter as Je}from"terra-draw-maplibre-gl-adapter";import{tw as Ve}from"twind";import We from"react";import{jsx as L}from"react/jsx-runtime";function te(t){return new Be({tracked:!0,adapter:new Je({map:t,coordinatePrecision:9}),modes:[new De({flags:{polygon:{feature:{scaleable:!0,rotateable:!0,draggable:!0,coordinates:{midpoints:!0,draggable:!0,deletable:!0}}},linestring:{feature:{draggable:!0,coordinates:{midpoints:!0,draggable:!0,deletable:!0}}},circle:{feature:{draggable:!0}},point:{feature:{draggable:!0}},rectangle:{feature:{draggable:!0,coordinates:{resizable:"opposite"}}},freehand:{feature:{draggable:!0}}}}),new Le,new Te({validation:(o,{updateType:e})=>e==="finish"||e==="commit"?G(o):{valid:!0}}),new Oe,new Fe({pointerDistance:30,validation:(o,{updateType:e})=>e==="finish"||e==="commit"?G(o):{valid:!0}}),new Re,new Ge({pointerDistance:5,validation:o=>G(o)})]})}var O=t=>t.map(o=>{var a,s;if((a=o.properties)!=null&&a.mode)return o;let e=(s=o.geometry)==null?void 0:s.type,r=e==="Point"?"point":e==="Polygon"?"polygon":e==="LineString"?"linestring":"unknown";return C(b({},o),{properties:C(b({},o.properties),{mode:r})})});var T=We.forwardRef((t,o)=>L("button",b({ref:o,type:"button",className:Ve`h-8 px-3 py-2 rounded-md focus:outline-none  cursor-pointer text-md flex align-middle items-center gap-2 bg-gray-100 hover:bg-gray-200 text-gray-700 disabled:cursor-not-allowed disabled:bg-gray-100! disabled:opacity-50`},t))),oe=({currentStyleIdx:t,onStyleChange:o,mapStyles:e})=>L("div",{style:{position:"absolute",left:12,bottom:12,background:"rgba(255,255,255,0.95)",padding:"8px",borderRadius:"6px",zIndex:1e3,boxShadow:"0 2px 4px rgba(0,0,0,0.2)"},children:L("select",{value:t,onChange:r=>o(Number(r.target.value)),style:{fontSize:14,padding:"4px"},children:e.map((r,a)=>L("option",{value:a,children:r.text||`Style ${a+1}`},r.key||a))})});function re(y){return D(this,arguments,function*({containerId:t,latitude:o=0,longitude:e=0,zoom:r,pitch:a,bearing:s,mapstyle:c}){let{getRTLTextPluginStatus:l,Map:m,setRTLTextPlugin:x}=yield import("maplibre-gl");return l()==="unavailable"&&x("https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js",!0),new m({container:t,style:c,center:{lat:o,lng:e},zoom:r,pitch:a,bearing:s})})}import{useEffect as Ze,useState as he,useCallback as J,useMemo as Ue}from"react";import{jsx as n,jsxs as I}from"react/jsx-runtime";var ne=()=>I("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[n("path",{d:"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"}),n("path",{d:"m15 5 4 4"})]}),ie=()=>I("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[n("path",{d:"m10 10-6.157 6.162a2 2 0 0 0-.5.833l-1.322 4.36a.5.5 0 0 0 .622.624l4.358-1.323a2 2 0 0 0 .83-.5L14 13.982"}),n("path",{d:"m12.829 7.172 4.359-4.346a1 1 0 1 1 3.986 3.986l-4.353 4.353"}),n("path",{d:"m15 5 4 4"}),n("path",{d:"m2 2 20 20"})]}),ae=()=>I("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[n("line",{x1:"2",x2:"5",y1:"12",y2:"12"}),n("line",{x1:"19",x2:"22",y1:"12",y2:"12"}),n("line",{x1:"12",x2:"12",y1:"2",y2:"5"}),n("line",{x1:"12",x2:"12",y1:"19",y2:"22"}),n("circle",{cx:"12",cy:"12",r:"7"})]}),le=()=>I("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[n("path",{d:"M12.586 12.586 19 19"}),n("path",{d:"M3.688 3.037a.497.497 0 0 0-.651.651l6.5 15.999a.501.501 0 0 0 .947-.062l1.569-6.083a2 2 0 0 1 1.448-1.479l6.124-1.579a.5.5 0 0 0 .063-.947z"})]}),se=()=>I("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[n("path",{d:"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"}),n("circle",{cx:"12",cy:"10",r:"3"})]}),ce=()=>n("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:n("line",{x1:"4",y1:"20",x2:"20",y2:"4"})}),pe=()=>n("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:n("polygon",{points:"12,2 22,8 18,22 6,22 2,8"})}),de=()=>n("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:n("rect",{x:"4",y:"4",width:"16",height:"16"})}),ue=()=>n("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:n("circle",{cx:"12",cy:"12",r:"10"})}),ge=()=>n("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:n("path",{d:"M3 16c1-3 4-5 7-4 3 1 5 3 7 2 2-1 3-4 1-6-1-2-4-2-6-1"})}),me=()=>n("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:n("path",{d:"M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"})});import{jsx as He}from"react/jsx-runtime";var ze={display:"flex",justifyContent:"center",alignItems:"center",width:30,height:30,padding:0,borderRadius:4},Ee=({mode:t,currentMode:o,onClick:e,icon:r,tooltip:a,disabled:s})=>He(T,{type:"button",title:a,disabled:s,onClick:()=>!s&&e(t!=null?t:""),style:C(b({},ze),{backgroundColor:s?"#d3d3d3":o===t?"#02cf87":"#f0f0f0",cursor:s?"not-allowed":"pointer",opacity:s?.6:1,width:40,height:40}),children:r}),fe=Ee;import{jsx as g,jsxs as Ae}from"react/jsx-runtime";function je({mode:t,setMode:o,onClick:e,draw:r,onFeaturesChange:a,isMultiple:s=!0,autoFocus:c}){let[y,l]=he(!1),[m,x]=he(!1),h=J(()=>x(r.getSnapshot().length>0),[r]);Ze(()=>{if(!!r)return r.on("finish",h),r.on("change",h),h(),()=>{r.off("finish",h),r.off("change",h)}},[r,h]);let S=J(()=>{if(!("geolocation"in navigator)){alert("Geolocation is not supported in this browser.");return}navigator.geolocation.getCurrentPosition(p=>{let v={type:"Feature",geometry:{type:"Point",coordinates:[p.coords.longitude,p.coords.latitude]},properties:{mode:"point",source:"geolocation"}};s||r.clear(),r.addFeatures([v]),a==null||a(r.getSnapshot()),c==null||c([v])},p=>{alert("Error getting geolocation"),console.error(p)}),o("current-location")},[r,s,a,c]),P=J(()=>{r.clear(),x(!1),o("static"),a==null||a([])},[r,a]),k=Ue(()=>[{icon:g(ae,{}),mode:"current-location",onClick:S,tooltip:"Use current location"},{icon:g(le,{}),mode:"select",onClick:e,tooltip:"Select"},{icon:g(se,{}),mode:"point",onClick:e,tooltip:"Point"},{icon:g(ce,{}),mode:"linestring",onClick:e,tooltip:"Linestring"},{icon:g(pe,{}),mode:"polygon",onClick:e,tooltip:"Polygon"},{icon:g(de,{}),mode:"rectangle",onClick:e,tooltip:"Reactangle"},{icon:g(ue,{}),mode:"circle",onClick:e,tooltip:"Circle"},{icon:g(ge,{}),mode:"freehand",onClick:e,tooltip:"Freehand"},{icon:g(me,{}),mode:"clear",onClick:P,tooltip:"Clear all features",disabled:!m}],[e,S,P,m]);return Ae("div",{style:{position:"absolute",top:10,left:10,display:"flex",flexDirection:"column",gap:6,zIndex:1e3,backgroundColor:"rgba(255,255,255,0.9)",padding:8,borderRadius:6,boxShadow:"0 2px 6px rgba(0,0,0,0.2)",maxWidth:"90vw"},children:[g(T,{onClick:()=>l(p=>!p),style:{display:"flex",justifyContent:"center",alignItems:"center",width:40,height:40,padding:0,borderRadius:4,backgroundColor:"#d3d3d3"},title:"Expand or collapse tools",children:y?g(ie,{}):g(ne,{})}),y&&g("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(40px, 1fr))",gap:6,maxHeight:"200px",overflowY:"auto",paddingRight:1},className:"custom-scrollbar",children:k.map((p,M)=>g(fe,{icon:p.icon,mode:p.mode,currentMode:t,onClick:p.onClick,tooltip:p.tooltip,disabled:p.disabled},M))})]})}var we=je;import Ye from"@turf/bbox";import{defaultMapStyles as _e}from"@biodiv-platform/naksha-commons";import{jsx as ve,jsxs as qe}from"react/jsx-runtime";var $e=t=>{var W,z;let o=V(null),[e,r]=F(),[a,s]=F("static"),[c,y]=F(),l=V(),{isMultiple:m,features:x=[],onFeaturesChange:h}=t,[S,P]=F((t==null?void 0:t.mapStyle)||0),k=(W=t.mapStyles)!=null?W:_e,p=(z=k[S])==null?void 0:z.style,M=k[S],v=V([]),R=xe(i=>{if(!(i!=null&&i.length)||!e)return;let d=Ye({type:"FeatureCollection",features:i});e.fitBounds(d,{padding:40,duration:1e3,maxZoom:15})},[e]);ye(()=>{let i=!1,d,u,w;return x.length>0&&(v.current=O(x)),D(void 0,null,function*(){var Z,U,j,A,Y,_,$,q,K,Q;let{NavigationControl:N,FullscreenControl:B}=yield import("maplibre-gl"),f=yield re({containerId:"maplibre-map",latitude:(U=(Z=t.defaultViewState)==null?void 0:Z.latitude)!=null?U:0,longitude:(A=(j=t.defaultViewState)==null?void 0:j.longitude)!=null?A:0,zoom:(_=(Y=t.defaultViewState)==null?void 0:Y.zoom)!=null?_:0,pitch:(q=($=t.defaultViewState)==null?void 0:$.pitch)!=null?q:0,bearing:(Q=(K=t.defaultViewState)==null?void 0:K.bearing)!=null?Q:0,mapstyle:p});if(i){f.remove();return}d=f,"maxZoom"in M&&M.maxZoom&&f.setMaxZoom(M.maxZoom);let E=new N({showCompass:!0,showZoom:!0,visualizePitch:!0}),H=new B({});u=E,w=H,f.addControl(E,"bottom-right"),f.addControl(H,"bottom-right"),f.once("style.load",()=>{i||r(f)})}),()=>{if(i=!0,l.current&&(v.current=l.current.getSnapshot()),l.current){try{l.current.stop()}catch(N){}l.current=void 0,y(void 0)}d&&(u&&d.removeControl(u),w&&d.removeControl(w),d.remove())}},[p]);let Se=i=>i.filter(d=>d.geometry.type!=="Point"||d.properties.mode!=="static"&&d.properties.mode!=="select");ye(()=>{if(!e)return;let i=te(e);i.start(),l.current=i,y(i);let d=()=>{let u=i.getSnapshot(),w=Se(u);if(!m&&w.length>1){let N=w.at(-1),B=w.slice(0,-1).map(f=>f.id).filter(f=>Boolean(f));if(B.length>0)try{i.removeFeatures(B)}catch(f){}w=[N]}h==null||h(w),R(w)};return i.on("finish",d),setTimeout(()=>{if(i.getSnapshot().length===0){let u=[];v.current.length>0?u=v.current:x.length>0&&(u=O(x)),!m&&u.length>1&&(u=[u.at(-1)]),u.length>0&&(i.addFeatures(u),R(u))}},100),()=>{i.off("finish",d)}},[e]);let Me=xe(i=>{c==null||c.setMode(i),s(i)},[c]);return qe("div",{ref:o,id:"maplibre-map",style:{width:"100%",height:"100%",position:"relative"},children:[ve(oe,{currentStyleIdx:S,onStyleChange:i=>{l.current&&(v.current=l.current.getSnapshot()),P(i),s("static")},mapStyles:k}),c&&ve(we,{mode:a,setMode:s,onClick:Me,draw:c,onFeaturesChange:h,isMultiple:m,autoFocus:R})]})},be=$e;import{jsx as Ke}from"react/jsx-runtime";var Tt=t=>Ke(be,b({},t));export{Tt as NakshaMaplibreDraw};

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { MapStyles } from '@biodiv-platform/naksha-commons';
 import { ViewState } from 'react-map-gl/maplibre';
 
@@ -16,6 +17,6 @@ interface NakshaMaplibreViewProps {
     }>;
 }
 
-declare const NakshaMaplibreDraw: (props: NakshaMaplibreViewProps) => JSX.Element;
+declare const NakshaMaplibreDraw: (props: NakshaMaplibreViewProps) => React.JSX.Element;
 
 export { NakshaMaplibreDraw };

package/dist/index.js

@@ -1 +1 @@
-"use strict";var Ce=Object.create;var L=Object.defineProperty,Ie=Object.defineProperties,Pe=Object.getOwnPropertyDescriptor,Be=Object.getOwnPropertyDescriptors,De=Object.getOwnPropertyNames,_=Object.getOwnPropertySymbols,Le=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty,Ne=Object.prototype.propertyIsEnumerable;var $=(e,o,t)=>o in e?L(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,b=(e,o)=>{for(var t in o||(o={}))q.call(o,t)&&$(e,t,o[t]);if(_)for(var t of _(o))Ne.call(o,t)&&$(e,t,o[t]);return e},N=(e,o)=>Ie(e,Be(o));var Te=(e,o)=>{for(var t in o)L(e,t,{get:o[t],enumerable:!0})},K=(e,o,t,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of De(o))!q.call(e,a)&&a!==t&&L(e,a,{get:()=>o[a],enumerable:!(i=Pe(o,a))||i.enumerable});return e};var Q=(e,o,t)=>(t=e!=null?Ce(Le(e)):{},K(o||!e||!e.__esModule?L(t,"default",{value:e,enumerable:!0}):t,e)),Re=e=>K(L({},"__esModule",{value:!0}),e);var We={};Te(We,{NakshaMaplibreDraw:()=>Ve});module.exports=Re(We);var J=require("maplibre-gl"),p=require("react");var l=require("terra-draw"),X=require("terra-draw-maplibre-gl-adapter"),ee=require("twind"),te=Q(require("react"));var T=require("react/jsx-runtime");function oe(e){return new l.TerraDraw({tracked:!0,adapter:new X.TerraDrawMapLibreGLAdapter({map:e,coordinatePrecision:9}),modes:[new l.TerraDrawSelectMode({flags:{polygon:{feature:{scaleable:!0,rotateable:!0,draggable:!0,coordinates:{midpoints:!0,draggable:!0,deletable:!0}}},linestring:{feature:{draggable:!0,coordinates:{midpoints:!0,draggable:!0,deletable:!0}}},circle:{feature:{draggable:!0}},point:{feature:{draggable:!0}},rectangle:{feature:{draggable:!0,coordinates:{resizable:"opposite"}}},freehand:{feature:{draggable:!0}}}}),new l.TerraDrawPointMode,new l.TerraDrawLineStringMode({validation:(o,{updateType:t})=>t==="finish"||t==="commit"?(0,l.ValidateNotSelfIntersecting)(o):{valid:!0}}),new l.TerraDrawRectangleMode,new l.TerraDrawPolygonMode({pointerDistance:30,validation:(o,{updateType:t})=>t==="finish"||t==="commit"?(0,l.ValidateNotSelfIntersecting)(o):{valid:!0}}),new l.TerraDrawCircleMode,new l.TerraDrawFreehandMode({pointerDistance:5,validation:o=>(0,l.ValidateNotSelfIntersecting)(o)})]})}var W=e=>e.map(o=>{var a,s;if((a=o.properties)!=null&&a.mode)return o;let t=(s=o.geometry)==null?void 0:s.type,i=t==="Point"?"point":t==="Polygon"?"polygon":t==="LineString"?"linestring":"unknown";return N(b({},o),{properties:N(b({},o.properties),{mode:i})})});var O=te.default.forwardRef((e,o)=>(0,T.jsx)("button",b({ref:o,type:"button",className:ee.tw`h-8 px-3 py-2 rounded-md focus:outline-none  cursor-pointer text-md flex align-middle items-center gap-2 bg-gray-100 hover:bg-gray-200 text-gray-700 disabled:cursor-not-allowed disabled:bg-gray-100! disabled:opacity-50`},e))),re=({currentStyleIdx:e,onStyleChange:o,mapStyles:t})=>(0,T.jsx)("div",{style:{position:"absolute",left:12,bottom:12,background:"rgba(255,255,255,0.95)",padding:"8px",borderRadius:"6px",zIndex:1e3,boxShadow:"0 2px 4px rgba(0,0,0,0.2)"},children:(0,T.jsx)("select",{value:e,onChange:i=>o(Number(i.target.value)),style:{fontSize:14,padding:"4px"},children:t.map((i,a)=>(0,T.jsx)("option",{value:a,children:i.text||`Style ${a+1}`},i.key||a))})});var I=require("maplibre-gl");function ne({containerId:e,latitude:o=0,longitude:t=0,zoom:i,pitch:a,bearing:s,mapstyle:u}){return(0,I.getRTLTextPluginStatus)()==="unavailable"&&(0,I.setRTLTextPlugin)("https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js",!0),new I.Map({container:e,style:u,center:{lat:o,lng:t},zoom:i,pitch:a,bearing:s})}var f=require("react");var r=require("react/jsx-runtime"),ie=()=>(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,r.jsx)("path",{d:"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"}),(0,r.jsx)("path",{d:"m15 5 4 4"})]}),ae=()=>(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,r.jsx)("path",{d:"m10 10-6.157 6.162a2 2 0 0 0-.5.833l-1.322 4.36a.5.5 0 0 0 .622.624l4.358-1.323a2 2 0 0 0 .83-.5L14 13.982"}),(0,r.jsx)("path",{d:"m12.829 7.172 4.359-4.346a1 1 0 1 1 3.986 3.986l-4.353 4.353"}),(0,r.jsx)("path",{d:"m15 5 4 4"}),(0,r.jsx)("path",{d:"m2 2 20 20"})]}),le=()=>(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,r.jsx)("line",{x1:"2",x2:"5",y1:"12",y2:"12"}),(0,r.jsx)("line",{x1:"19",x2:"22",y1:"12",y2:"12"}),(0,r.jsx)("line",{x1:"12",x2:"12",y1:"2",y2:"5"}),(0,r.jsx)("line",{x1:"12",x2:"12",y1:"19",y2:"22"}),(0,r.jsx)("circle",{cx:"12",cy:"12",r:"7"})]}),se=()=>(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,r.jsx)("path",{d:"M12.586 12.586 19 19"}),(0,r.jsx)("path",{d:"M3.688 3.037a.497.497 0 0 0-.651.651l6.5 15.999a.501.501 0 0 0 .947-.062l1.569-6.083a2 2 0 0 1 1.448-1.479l6.124-1.579a.5.5 0 0 0 .063-.947z"})]}),ce=()=>(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,r.jsx)("path",{d:"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"}),(0,r.jsx)("circle",{cx:"12",cy:"10",r:"3"})]}),de=()=>(0,r.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:(0,r.jsx)("line",{x1:"4",y1:"20",x2:"20",y2:"4"})}),pe=()=>(0,r.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:(0,r.jsx)("polygon",{points:"12,2 22,8 18,22 6,22 2,8"})}),ue=()=>(0,r.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:(0,r.jsx)("rect",{x:"4",y:"4",width:"16",height:"16"})}),ge=()=>(0,r.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:(0,r.jsx)("circle",{cx:"12",cy:"12",r:"10"})}),me=()=>(0,r.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:(0,r.jsx)("path",{d:"M3 16c1-3 4-5 7-4 3 1 5 3 7 2 2-1 3-4 1-6-1-2-4-2-6-1"})}),he=()=>(0,r.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:(0,r.jsx)("path",{d:"M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"})});var we=require("react/jsx-runtime"),Fe={display:"flex",justifyContent:"center",alignItems:"center",width:30,height:30,padding:0,borderRadius:4},Ge=({mode:e,currentMode:o,onClick:t,icon:i,tooltip:a,disabled:s})=>(0,we.jsx)(O,{type:"button",title:a,disabled:s,onClick:()=>!s&&t(e!=null?e:""),style:N(b({},Fe),{backgroundColor:s?"#d3d3d3":o===e?"#02cf87":"#f0f0f0",cursor:s?"not-allowed":"pointer",opacity:s?.6:1,width:40,height:40}),children:i}),fe=Ge;var c=require("react/jsx-runtime");function Oe({mode:e,setMode:o,onClick:t,draw:i,onFeaturesChange:a,isMultiple:s=!0,autoFocus:u}){let[P,w]=(0,f.useState)(!1),[M,v]=(0,f.useState)(!1),m=(0,f.useCallback)(()=>v(i.getSnapshot().length>0),[i]);(0,f.useEffect)(()=>{if(!!i)return i.on("finish",m),i.on("change",m),m(),()=>{i.off("finish",m),i.off("change",m)}},[i,m]);let k=(0,f.useCallback)(()=>{if(!("geolocation"in navigator)){alert("Geolocation is not supported in this browser.");return}navigator.geolocation.getCurrentPosition(d=>{let y={type:"Feature",geometry:{type:"Point",coordinates:[d.coords.longitude,d.coords.latitude]},properties:{mode:"point",source:"geolocation"}};s||i.clear(),i.addFeatures([y]),a==null||a(i.getSnapshot()),u==null||u([y])},d=>{alert("Error getting geolocation"),console.error(d)}),o("current-location")},[i,s,a,u]),F=(0,f.useCallback)(()=>{i.clear(),v(!1),o("static"),a==null||a([])},[i,a]),B=(0,f.useMemo)(()=>[{icon:(0,c.jsx)(le,{}),mode:"current-location",onClick:k,tooltip:"Use current location"},{icon:(0,c.jsx)(se,{}),mode:"select",onClick:t,tooltip:"Select"},{icon:(0,c.jsx)(ce,{}),mode:"point",onClick:t,tooltip:"Point"},{icon:(0,c.jsx)(de,{}),mode:"linestring",onClick:t,tooltip:"Linestring"},{icon:(0,c.jsx)(pe,{}),mode:"polygon",onClick:t,tooltip:"Polygon"},{icon:(0,c.jsx)(ue,{}),mode:"rectangle",onClick:t,tooltip:"Reactangle"},{icon:(0,c.jsx)(ge,{}),mode:"circle",onClick:t,tooltip:"Circle"},{icon:(0,c.jsx)(me,{}),mode:"freehand",onClick:t,tooltip:"Freehand"},{icon:(0,c.jsx)(he,{}),mode:"clear",onClick:F,tooltip:"Clear all features",disabled:!M}],[t,k,F,M]);return(0,c.jsxs)("div",{style:{position:"absolute",top:10,left:10,display:"flex",flexDirection:"column",gap:6,zIndex:1e3,backgroundColor:"rgba(255,255,255,0.9)",padding:8,borderRadius:6,boxShadow:"0 2px 6px rgba(0,0,0,0.2)",maxWidth:"90vw"},children:[(0,c.jsx)(O,{onClick:()=>w(d=>!d),style:{display:"flex",justifyContent:"center",alignItems:"center",width:40,height:40,padding:0,borderRadius:4,backgroundColor:"#d3d3d3"},title:"Expand or collapse tools",children:P?(0,c.jsx)(ae,{}):(0,c.jsx)(ie,{})}),P&&(0,c.jsx)("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(40px, 1fr))",gap:6,maxHeight:"200px",overflowY:"auto",paddingRight:1},className:"custom-scrollbar",children:B.map((d,C)=>(0,c.jsx)(fe,{icon:d.icon,mode:d.mode,currentMode:e,onClick:d.onClick,tooltip:d.tooltip,disabled:d.disabled},C))})]})}var xe=Oe;var ye=Q(require("@turf/bbox")),be=require("@biodiv-platform/naksha-commons"),R=require("react/jsx-runtime"),Je=e=>{var z,E;let o=(0,p.useRef)(null),[t,i]=(0,p.useState)(),[a,s]=(0,p.useState)("static"),[u,P]=(0,p.useState)(),w=(0,p.useRef)(),{isMultiple:M,features:v=[],onFeaturesChange:m}=e,[k,F]=(0,p.useState)((e==null?void 0:e.mapStyle)||0),B=(z=e.mapStyles)!=null?z:be.defaultMapStyles,d=(E=B[k])==null?void 0:E.style,C=B[k],y=(0,p.useRef)([]),V=(0,p.useCallback)(n=>{if(!(n!=null&&n.length)||!t)return;let h=(0,ye.default)({type:"FeatureCollection",features:n});t.fitBounds(h,{padding:40,duration:1e3,maxZoom:15})},[t]);(0,p.useEffect)(()=>{var x,G,D,S,H,Z,U,j,A,Y;v.length>0&&(y.current=W(v));let n=ne({containerId:"maplibre-map",latitude:(G=(x=e.defaultViewState)==null?void 0:x.latitude)!=null?G:0,longitude:(S=(D=e.defaultViewState)==null?void 0:D.longitude)!=null?S:0,zoom:(Z=(H=e.defaultViewState)==null?void 0:H.zoom)!=null?Z:0,pitch:(j=(U=e.defaultViewState)==null?void 0:U.pitch)!=null?j:0,bearing:(Y=(A=e.defaultViewState)==null?void 0:A.bearing)!=null?Y:0,mapstyle:d});"maxZoom"in C&&C.maxZoom&&n.setMaxZoom(C.maxZoom);let h=new J.NavigationControl({showCompass:!0,showZoom:!0,visualizePitch:!0}),g=new J.FullscreenControl({});return n.addControl(h,"bottom-right"),n.addControl(g,"bottom-right"),n.once("style.load",()=>{i(n)}),()=>{if(w.current&&(y.current=w.current.getSnapshot()),w.current){try{w.current.stop()}catch(Ee){}w.current=void 0,P(void 0)}n&&(n.removeControl(h),n.removeControl(g),n.remove())}},[d]);let Me=n=>n.filter(h=>h.geometry.type!=="Point"||h.properties.mode!=="static"&&h.properties.mode!=="select");(0,p.useEffect)(()=>{if(!t)return;let n=oe(t);n.start(),w.current=n,P(n);let h=()=>{let g=n.getSnapshot(),x=Me(g);if(!M&&x.length>1){let G=x.at(-1),D=x.slice(0,-1).map(S=>S.id).filter(S=>Boolean(S));if(D.length>0)try{n.removeFeatures(D)}catch(S){}x=[G]}m==null||m(x),V(x)};return n.on("finish",h),setTimeout(()=>{if(n.getSnapshot().length===0){let g=[];y.current.length>0?g=y.current:v.length>0&&(g=W(v)),!M&&g.length>1&&(g=[g.at(-1)]),g.length>0&&(n.addFeatures(g),V(g))}},100),()=>{n.off("finish",h)}},[t]);let ke=(0,p.useCallback)(n=>{u==null||u.setMode(n),s(n)},[u]);return(0,R.jsxs)("div",{ref:o,id:"maplibre-map",style:{width:"100%",height:"100%",position:"relative"},children:[(0,R.jsx)(re,{currentStyleIdx:k,onStyleChange:n=>{w.current&&(y.current=w.current.getSnapshot()),F(n),s("static")},mapStyles:B}),u&&(0,R.jsx)(xe,{mode:a,setMode:s,onClick:ke,draw:u,onFeaturesChange:m,isMultiple:M,autoFocus:V})]})},ve=Je;var Se=require("react/jsx-runtime"),Ve=e=>(0,Se.jsx)(ve,b({},e));0&&(module.exports={NakshaMaplibreDraw});
+"use strict";var De=Object.create;var N=Object.defineProperty,Le=Object.defineProperties,Te=Object.getOwnPropertyDescriptor,Fe=Object.getOwnPropertyDescriptors,Re=Object.getOwnPropertyNames,ee=Object.getOwnPropertySymbols,Ge=Object.getPrototypeOf,oe=Object.prototype.hasOwnProperty,Oe=Object.prototype.propertyIsEnumerable;var te=(e,o,t)=>o in e?N(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,k=(e,o)=>{for(var t in o||(o={}))oe.call(o,t)&&te(e,t,o[t]);if(ee)for(var t of ee(o))Oe.call(o,t)&&te(e,t,o[t]);return e},B=(e,o)=>Le(e,Fe(o));var Je=(e,o)=>{for(var t in o)N(e,t,{get:o[t],enumerable:!0})},re=(e,o,t,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of Re(o))!oe.call(e,i)&&i!==t&&N(e,i,{get:()=>o[i],enumerable:!(n=Te(o,i))||n.enumerable});return e};var G=(e,o,t)=>(t=e!=null?De(Ge(e)):{},re(o||!e||!e.__esModule?N(t,"default",{value:e,enumerable:!0}):t,e)),Ve=e=>re(N({},"__esModule",{value:!0}),e);var O=(e,o,t)=>new Promise((n,i)=>{var c=l=>{try{b(t.next(l))}catch(h){i(h)}},d=l=>{try{b(t.throw(l))}catch(h){i(h)}},b=l=>l.done?n(l.value):Promise.resolve(l.value).then(c,d);b((t=t.apply(e,o)).next())});var Ue={};Je(Ue,{NakshaMaplibreDraw:()=>Ze});module.exports=Ve(Ue);var g=require("react");var s=require("terra-draw"),ne=require("terra-draw-maplibre-gl-adapter"),ie=require("twind"),ae=G(require("react"));var D=require("react/jsx-runtime");function le(e){return new s.TerraDraw({tracked:!0,adapter:new ne.TerraDrawMapLibreGLAdapter({map:e,coordinatePrecision:9}),modes:[new s.TerraDrawSelectMode({flags:{polygon:{feature:{scaleable:!0,rotateable:!0,draggable:!0,coordinates:{midpoints:!0,draggable:!0,deletable:!0}}},linestring:{feature:{draggable:!0,coordinates:{midpoints:!0,draggable:!0,deletable:!0}}},circle:{feature:{draggable:!0}},point:{feature:{draggable:!0}},rectangle:{feature:{draggable:!0,coordinates:{resizable:"opposite"}}},freehand:{feature:{draggable:!0}}}}),new s.TerraDrawPointMode,new s.TerraDrawLineStringMode({validation:(o,{updateType:t})=>t==="finish"||t==="commit"?(0,s.ValidateNotSelfIntersecting)(o):{valid:!0}}),new s.TerraDrawRectangleMode,new s.TerraDrawPolygonMode({pointerDistance:30,validation:(o,{updateType:t})=>t==="finish"||t==="commit"?(0,s.ValidateNotSelfIntersecting)(o):{valid:!0}}),new s.TerraDrawCircleMode,new s.TerraDrawFreehandMode({pointerDistance:5,validation:o=>(0,s.ValidateNotSelfIntersecting)(o)})]})}var W=e=>e.map(o=>{var i,c;if((i=o.properties)!=null&&i.mode)return o;let t=(c=o.geometry)==null?void 0:c.type,n=t==="Point"?"point":t==="Polygon"?"polygon":t==="LineString"?"linestring":"unknown";return B(k({},o),{properties:B(k({},o.properties),{mode:n})})});var J=ae.default.forwardRef((e,o)=>(0,D.jsx)("button",k({ref:o,type:"button",className:ie.tw`h-8 px-3 py-2 rounded-md focus:outline-none  cursor-pointer text-md flex align-middle items-center gap-2 bg-gray-100 hover:bg-gray-200 text-gray-700 disabled:cursor-not-allowed disabled:bg-gray-100! disabled:opacity-50`},e))),se=({currentStyleIdx:e,onStyleChange:o,mapStyles:t})=>(0,D.jsx)("div",{style:{position:"absolute",left:12,bottom:12,background:"rgba(255,255,255,0.95)",padding:"8px",borderRadius:"6px",zIndex:1e3,boxShadow:"0 2px 4px rgba(0,0,0,0.2)"},children:(0,D.jsx)("select",{value:e,onChange:n=>o(Number(n.target.value)),style:{fontSize:14,padding:"4px"},children:t.map((n,i)=>(0,D.jsx)("option",{value:i,children:n.text||`Style ${i+1}`},n.key||i))})});function ce(b){return O(this,arguments,function*({containerId:e,latitude:o=0,longitude:t=0,zoom:n,pitch:i,bearing:c,mapstyle:d}){let{getRTLTextPluginStatus:l,Map:h,setRTLTextPlugin:S}=yield import("maplibre-gl");return l()==="unavailable"&&S("https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js",!0),new h({container:e,style:d,center:{lat:o,lng:t},zoom:n,pitch:i,bearing:c})})}var x=require("react");var r=require("react/jsx-runtime"),pe=()=>(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,r.jsx)("path",{d:"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"}),(0,r.jsx)("path",{d:"m15 5 4 4"})]}),de=()=>(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,r.jsx)("path",{d:"m10 10-6.157 6.162a2 2 0 0 0-.5.833l-1.322 4.36a.5.5 0 0 0 .622.624l4.358-1.323a2 2 0 0 0 .83-.5L14 13.982"}),(0,r.jsx)("path",{d:"m12.829 7.172 4.359-4.346a1 1 0 1 1 3.986 3.986l-4.353 4.353"}),(0,r.jsx)("path",{d:"m15 5 4 4"}),(0,r.jsx)("path",{d:"m2 2 20 20"})]}),ue=()=>(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,r.jsx)("line",{x1:"2",x2:"5",y1:"12",y2:"12"}),(0,r.jsx)("line",{x1:"19",x2:"22",y1:"12",y2:"12"}),(0,r.jsx)("line",{x1:"12",x2:"12",y1:"2",y2:"5"}),(0,r.jsx)("line",{x1:"12",x2:"12",y1:"19",y2:"22"}),(0,r.jsx)("circle",{cx:"12",cy:"12",r:"7"})]}),ge=()=>(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,r.jsx)("path",{d:"M12.586 12.586 19 19"}),(0,r.jsx)("path",{d:"M3.688 3.037a.497.497 0 0 0-.651.651l6.5 15.999a.501.501 0 0 0 .947-.062l1.569-6.083a2 2 0 0 1 1.448-1.479l6.124-1.579a.5.5 0 0 0 .063-.947z"})]}),me=()=>(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,r.jsx)("path",{d:"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"}),(0,r.jsx)("circle",{cx:"12",cy:"10",r:"3"})]}),fe=()=>(0,r.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:(0,r.jsx)("line",{x1:"4",y1:"20",x2:"20",y2:"4"})}),he=()=>(0,r.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:(0,r.jsx)("polygon",{points:"12,2 22,8 18,22 6,22 2,8"})}),we=()=>(0,r.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:(0,r.jsx)("rect",{x:"4",y:"4",width:"16",height:"16"})}),ye=()=>(0,r.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:(0,r.jsx)("circle",{cx:"12",cy:"12",r:"10"})}),xe=()=>(0,r.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:(0,r.jsx)("path",{d:"M3 16c1-3 4-5 7-4 3 1 5 3 7 2 2-1 3-4 1-6-1-2-4-2-6-1"})}),ve=()=>(0,r.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:(0,r.jsx)("path",{d:"M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"})});var Se=require("react/jsx-runtime"),We={display:"flex",justifyContent:"center",alignItems:"center",width:30,height:30,padding:0,borderRadius:4},ze=({mode:e,currentMode:o,onClick:t,icon:n,tooltip:i,disabled:c})=>(0,Se.jsx)(J,{type:"button",title:i,disabled:c,onClick:()=>!c&&t(e!=null?e:""),style:B(k({},We),{backgroundColor:c?"#d3d3d3":o===e?"#02cf87":"#f0f0f0",cursor:c?"not-allowed":"pointer",opacity:c?.6:1,width:40,height:40}),children:n}),be=ze;var p=require("react/jsx-runtime");function Ee({mode:e,setMode:o,onClick:t,draw:n,onFeaturesChange:i,isMultiple:c=!0,autoFocus:d}){let[b,l]=(0,x.useState)(!1),[h,S]=(0,x.useState)(!1),y=(0,x.useCallback)(()=>S(n.getSnapshot().length>0),[n]);(0,x.useEffect)(()=>{if(!!n)return n.on("finish",y),n.on("change",y),y(),()=>{n.off("finish",y),n.off("change",y)}},[n,y]);let C=(0,x.useCallback)(()=>{if(!("geolocation"in navigator)){alert("Geolocation is not supported in this browser.");return}navigator.geolocation.getCurrentPosition(u=>{let M={type:"Feature",geometry:{type:"Point",coordinates:[u.coords.longitude,u.coords.latitude]},properties:{mode:"point",source:"geolocation"}};c||n.clear(),n.addFeatures([M]),i==null||i(n.getSnapshot()),d==null||d([M])},u=>{alert("Error getting geolocation"),console.error(u)}),o("current-location")},[n,c,i,d]),T=(0,x.useCallback)(()=>{n.clear(),S(!1),o("static"),i==null||i([])},[n,i]),P=(0,x.useMemo)(()=>[{icon:(0,p.jsx)(ue,{}),mode:"current-location",onClick:C,tooltip:"Use current location"},{icon:(0,p.jsx)(ge,{}),mode:"select",onClick:t,tooltip:"Select"},{icon:(0,p.jsx)(me,{}),mode:"point",onClick:t,tooltip:"Point"},{icon:(0,p.jsx)(fe,{}),mode:"linestring",onClick:t,tooltip:"Linestring"},{icon:(0,p.jsx)(he,{}),mode:"polygon",onClick:t,tooltip:"Polygon"},{icon:(0,p.jsx)(we,{}),mode:"rectangle",onClick:t,tooltip:"Reactangle"},{icon:(0,p.jsx)(ye,{}),mode:"circle",onClick:t,tooltip:"Circle"},{icon:(0,p.jsx)(xe,{}),mode:"freehand",onClick:t,tooltip:"Freehand"},{icon:(0,p.jsx)(ve,{}),mode:"clear",onClick:T,tooltip:"Clear all features",disabled:!h}],[t,C,T,h]);return(0,p.jsxs)("div",{style:{position:"absolute",top:10,left:10,display:"flex",flexDirection:"column",gap:6,zIndex:1e3,backgroundColor:"rgba(255,255,255,0.9)",padding:8,borderRadius:6,boxShadow:"0 2px 6px rgba(0,0,0,0.2)",maxWidth:"90vw"},children:[(0,p.jsx)(J,{onClick:()=>l(u=>!u),style:{display:"flex",justifyContent:"center",alignItems:"center",width:40,height:40,padding:0,borderRadius:4,backgroundColor:"#d3d3d3"},title:"Expand or collapse tools",children:b?(0,p.jsx)(de,{}):(0,p.jsx)(pe,{})}),b&&(0,p.jsx)("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(40px, 1fr))",gap:6,maxHeight:"200px",overflowY:"auto",paddingRight:1},className:"custom-scrollbar",children:P.map((u,I)=>(0,p.jsx)(be,{icon:u.icon,mode:u.mode,currentMode:e,onClick:u.onClick,tooltip:u.tooltip,disabled:u.disabled},I))})]})}var Me=Ee;var ke=G(require("@turf/bbox")),Ce=require("@biodiv-platform/naksha-commons");var L=require("react/jsx-runtime"),He=e=>{var z,E;let o=(0,g.useRef)(null),[t,n]=(0,g.useState)(),[i,c]=(0,g.useState)("static"),[d,b]=(0,g.useState)(),l=(0,g.useRef)(),{isMultiple:h,features:S=[],onFeaturesChange:y}=e,[C,T]=(0,g.useState)((e==null?void 0:e.mapStyle)||0),P=(z=e.mapStyles)!=null?z:Ce.defaultMapStyles,u=(E=P[C])==null?void 0:E.style,I=P[C],M=(0,g.useRef)([]),V=(0,g.useCallback)(a=>{if(!(a!=null&&a.length)||!t)return;let m=(0,ke.default)({type:"FeatureCollection",features:a});t.fitBounds(m,{padding:40,duration:1e3,maxZoom:15})},[t]);(0,g.useEffect)(()=>{let a=!1,m,f,v;return S.length>0&&(M.current=W(S)),O(void 0,null,function*(){var U,j,A,Y,_,$,q,K,Q,X;let{NavigationControl:F,FullscreenControl:R}=yield import("maplibre-gl"),w=yield ce({containerId:"maplibre-map",latitude:(j=(U=e.defaultViewState)==null?void 0:U.latitude)!=null?j:0,longitude:(Y=(A=e.defaultViewState)==null?void 0:A.longitude)!=null?Y:0,zoom:($=(_=e.defaultViewState)==null?void 0:_.zoom)!=null?$:0,pitch:(K=(q=e.defaultViewState)==null?void 0:q.pitch)!=null?K:0,bearing:(X=(Q=e.defaultViewState)==null?void 0:Q.bearing)!=null?X:0,mapstyle:u});if(a){w.remove();return}m=w,"maxZoom"in I&&I.maxZoom&&w.setMaxZoom(I.maxZoom);let H=new F({showCompass:!0,showZoom:!0,visualizePitch:!0}),Z=new R({});f=H,v=Z,w.addControl(H,"bottom-right"),w.addControl(Z,"bottom-right"),w.once("style.load",()=>{a||n(w)})}),()=>{if(a=!0,l.current&&(M.current=l.current.getSnapshot()),l.current){try{l.current.stop()}catch(F){}l.current=void 0,b(void 0)}m&&(f&&m.removeControl(f),v&&m.removeControl(v),m.remove())}},[u]);let Ne=a=>a.filter(m=>m.geometry.type!=="Point"||m.properties.mode!=="static"&&m.properties.mode!=="select");(0,g.useEffect)(()=>{if(!t)return;let a=le(t);a.start(),l.current=a,b(a);let m=()=>{let f=a.getSnapshot(),v=Ne(f);if(!h&&v.length>1){let F=v.at(-1),R=v.slice(0,-1).map(w=>w.id).filter(w=>Boolean(w));if(R.length>0)try{a.removeFeatures(R)}catch(w){}v=[F]}y==null||y(v),V(v)};return a.on("finish",m),setTimeout(()=>{if(a.getSnapshot().length===0){let f=[];M.current.length>0?f=M.current:S.length>0&&(f=W(S)),!h&&f.length>1&&(f=[f.at(-1)]),f.length>0&&(a.addFeatures(f),V(f))}},100),()=>{a.off("finish",m)}},[t]);let Be=(0,g.useCallback)(a=>{d==null||d.setMode(a),c(a)},[d]);return(0,L.jsxs)("div",{ref:o,id:"maplibre-map",style:{width:"100%",height:"100%",position:"relative"},children:[(0,L.jsx)(se,{currentStyleIdx:C,onStyleChange:a=>{l.current&&(M.current=l.current.getSnapshot()),T(a),c("static")},mapStyles:P}),d&&(0,L.jsx)(Me,{mode:i,setMode:c,onClick:Be,draw:d,onFeaturesChange:y,isMultiple:h,autoFocus:V})]})},Ie=He;var Pe=require("react/jsx-runtime"),Ze=e=>(0,Pe.jsx)(Ie,k({},e));0&&(module.exports={NakshaMaplibreDraw});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@biodiv-platform/naksha-maplibre-draw",
-  "version": "5.0.11",
+  "version": "5.0.12",
   "author": "arun",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",
@@ -31,7 +31,7 @@
     "react": ">=18",
     "react-map-gl": "^8.0.4",
     "tsup": "^6.1.2",
-    "typescript": "^5.7.3"
+    "typescript": "^4.7.3"
   },
   "dependencies": {
     "@biodiv-platform/naksha-commons": "*",