@biodiv-platform/naksha-maplibre-draw 5.0.1 → 5.0.2

package/dist/esm/index.js

@@ -1 +1 @@
-var F=Object.defineProperty;var M=Object.getOwnPropertySymbols;var x=Object.prototype.hasOwnProperty,V=Object.prototype.propertyIsEnumerable;var C=(e,o,r)=>o in e?F(e,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[o]=r,l=(e,o)=>{for(var r in o||(o={}))x.call(o,r)&&C(e,r,o[r]);if(M)for(var r of M(o))V.call(o,r)&&C(e,r,o[r]);return e};import{MapProvider as W}from"react-map-gl/maplibre";import{defaultMapStyles as G,defaultViewState as B}from"@biodiv-platform/naksha-commons";import I from"@turf/bbox";import{useEffect as N,useState as g}from"react";import J,{NavigationControl as O,useMap as U}from"react-map-gl/maplibre";import{emit as u,useListener as k}from"react-gbus";import{useControl as L}from"react-map-gl/maplibre";import{jsx as n}from"react/jsx-runtime";function c({onDelete:e}){return n("div",{className:"maplibregl-ctrl-top-left",style:{marginTop:"100px"},children:n("div",{className:"maplibregl-ctrl-group maplibregl-ctrl",children:n("button",{className:"maplibre-gl-draw_ctrl-draw-btn maplibre-gl-draw_trash",title:"Delete",onClick:e,style:{display:"flex",justifyContent:"center",alignItems:"center",width:"30px",height:"30px"},children: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{MaplibreTerradrawControl as R}from"@watergis/maplibre-gl-terradraw";import{jsx as T}from"react/jsx-runtime";var f="rmsc-draw-updated";function m(e){k(o,[f]);function o(t){var s;if(!r)return;let a=r.getFeatures().features,i=e.isMultiple?a:[a[a.length-1]];(s=e.setFeatures)==null||s.call(e,i)}let r=L(({map:t})=>{let a=new R({modes:["point","linestring","polygon"],open:!0});return t.on("terradraw.create",i=>{e.isMultiple||a.terradraw.clear(),a.getTerraDrawInstance().setMode("select"),u(f,i)}),t.on("terradraw.update",i=>u(f,i)),t.on("terradraw.delete",i=>u(f,i)),a},()=>{},{position:"top-left"});return T(c,{onDelete:()=>{var t;r.terradraw.clear(),(t=e.setFeatures)==null||t.call(e,[])}})}import{Layer as d,Source as _}from"react-map-gl/maplibre";var S={id:"data",type:"fill",paint:{"fill-color":"#f03b20","fill-opacity":.2},filter:["==",["geometry-type"],"Polygon"]},v={type:"circle",paint:{"circle-radius":8,"circle-color":"#f03b20","circle-opacity":.8},filter:["==",["geometry-type"],"Point"]},D={type:"line",paint:{"line-color":"#f03b20","line-width":1.6,"line-dasharray":[6,3],"line-opacity":.8},filter:["==",["geometry-type"],"LineString"]};import{jsx as y,jsxs as E}from"react/jsx-runtime";function p({features:e}){return e!=null&&e.length?E(_,{type:"geojson",data:{type:"FeatureCollection",features:e},children:[y(d,l({},v)),y(d,l({},D)),y(d,l({},S))]}):null}import{jsx as w,jsxs as H}from"react/jsx-runtime";var A=O;function h(e){let{mapv:o}=U(),[r]=g(G[(e==null?void 0:e.mapStyle)||0].style),[b]=g(e.defaultViewState||B),[t,a]=g(e.features||[]),i=()=>{if(!(t!=null&&t.length)||!o)return;let s=I({type:"FeatureCollection",features:t});o.fitBounds(s,{padding:40,duration:1e3})};return N(()=>{e.onFeaturesChange&&e.onFeaturesChange(t),i()},[t]),N(()=>{e.isControlled&&JSON.stringify(t)!==JSON.stringify(e.features)&&a(e.features||[])},[e.features]),H(J,{id:"mapv",cursor:"default",initialViewState:b,style:{width:"100%",height:"100%"},mapStyle:r,onLoad:i,children:[w(A,{position:"bottom-right",showZoom:!0,showCompass:!0}),w(m,{features:t,setFeatures:a,isControlled:e.isControlled,isMultiple:e.isMultiple}),w(p,{features:t})]})}import{jsx as P}from"react/jsx-runtime";var we=e=>P(W,{children:P(h,l({},e))});export{we as NakshaMaplibreDraw};
+var ne=Object.defineProperty,ae=Object.defineProperties;var ie=Object.getOwnPropertyDescriptors;var J=Object.getOwnPropertySymbols;var se=Object.prototype.hasOwnProperty,le=Object.prototype.propertyIsEnumerable;var O=(e,t,r)=>t in e?ne(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,b=(e,t)=>{for(var r in t||(t={}))se.call(t,r)&&O(e,r,t[r]);if(J)for(var r of J(t))le.call(t,r)&&O(e,r,t[r]);return e},D=(e,t)=>ae(e,ie(t));import Y from"maplibre-gl";import{TerraDraw as ue,TerraDrawSelectMode as de,TerraDrawPointMode as ce,TerraDrawLineStringMode as pe,TerraDrawPolygonMode as ge,TerraDrawCircleMode as me,TerraDrawFreehandMode as fe,ValidateNotSelfIntersecting as F,TerraDrawRectangleMode as he}from"terra-draw";import{TerraDrawMapLibreGLAdapter as we}from"terra-draw-maplibre-gl-adapter";function V(e){return new ue({tracked:!0,adapter:new we({map:e,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 ce,new pe({validation:(t,{updateType:r})=>r==="finish"||r==="commit"?F(t):{valid:!0}}),new he,new ge({pointerDistance:30,validation:(t,{updateType:r})=>r==="finish"||r==="commit"?F(t):{valid:!0}}),new me,new fe({pointerDistance:5,validation:t=>F(t)})]})}import{useRef as ye,useState as m,useEffect as X,useCallback as P}from"react";import L from"maplibre-gl";function z({containerId:e,latitude:t=0,longitude:r=0,zoom:d,pitch:i,bearing:c,mapstyle:N}){return L.getRTLTextPluginStatus()==="unavailable"&&L.setRTLTextPlugin("https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js",!0),new L.Map({container:e,style:N,center:{lat:t,lng:r},zoom:d,pitch:i,bearing:c})}import{jsx as l,jsxs as q}from"react/jsx-runtime";var E=()=>q("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:[l("path",{d:"M12.586 12.586 19 19"}),l("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"})]}),W=()=>q("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:[l("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"}),l("circle",{cx:"12",cy:"10",r:"3"})]}),A=()=>l("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:l("line",{x1:"4",y1:"20",x2:"20",y2:"4"})}),H=()=>l("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:l("polygon",{points:"12,2 22,8 18,22 6,22 2,8"})}),Z=()=>l("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:l("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 K}from"react/jsx-runtime";var be=({draw:e})=>e?K("button",{onClick:()=>e.clear(),title:"Delete",style:{display:"flex",justifyContent:"center",alignItems:"center",width:"30px",height:"30px",padding:"0",borderRadius:"4px",backgroundColor:"#f0f0f0",cursor:"pointer"},children:K(Z,{})}):null,Q=be;import{jsx as xe}from"react/jsx-runtime";var Me=({mode:e,currentMode:t,changeMode:r,icon:d,tooltip:i})=>xe("button",{onClick:()=>r(e),title:i,style:{display:"flex",justifyContent:"center",alignItems:"center",width:"30px",height:"30px",padding:"0",borderRadius:"4px",backgroundColor:t===e?"#02cf87":"#f0f0f0",cursor:"pointer"},children:d}),M=Me;import{jsx as u,jsxs as ve}from"react/jsx-runtime";var Se=({mode:e,changeMode:t,draw:r})=>ve("div",{style:{position:"absolute",top:"10px",left:"10px",display:"flex",flexDirection:"column",gap:"6px",zIndex:1e3,backgroundColor:"rgba(255, 255, 255, 0.9)",padding:"8px",borderRadius:"6px",boxShadow:"0 2px 6px rgba(0,0,0,0.2)"},children:[u(M,{mode:"select",icon:u(E,{}),currentMode:e,changeMode:t,tooltip:"Select"}),u(M,{mode:"point",icon:u(W,{}),currentMode:e,changeMode:t,tooltip:"Point"}),u(M,{mode:"linestring",icon:u(A,{}),currentMode:e,changeMode:t,tooltip:"Line"}),u(M,{mode:"polygon",icon:u(H,{}),currentMode:e,changeMode:t,tooltip:"Polygon"}),r&&u(Q,{draw:r})]}),U=Se;import{defaultMapStyles as ke}from"@biodiv-platform/naksha-commons";import{Fragment as Pe,jsx as T,jsxs as Te}from"react/jsx-runtime";var Ce=e=>e.map(t=>{var i,c;if((i=t.properties)!=null&&i.mode)return t;let r=(c=t.geometry)==null?void 0:c.type,d=r==="Point"?"point":r==="Polygon"?"polygon":r==="LineString"?"linestring":"unknown";return D(b({},t),{properties:D(b({},t.properties),{mode:d})})}),De=e=>{if(!e.length)return null;let t=new Y.LngLatBounds;return e.forEach(r=>{Fe(r).forEach(i=>{Array.isArray(i[0])?i.forEach(c=>t.extend(c)):t.extend(i)})}),t},Fe=e=>{let t=e.geometry;switch(t.type){case"Point":return[t.coordinates];case"LineString":return[t.coordinates];case"Polygon":return t.coordinates;default:return[]}},Le=e=>{let t=ye(null),[r,d]=m(),[i,c]=m("static"),[N,$]=m(),[Ie,I]=m([]),[p,j]=m(),ee=ke[(e==null?void 0:e.mapStyle)||0].style,{isMultiple:x=!0,isControlled:S=!1,setFeatures:v}=e,[te,re]=m([]),y=P(o=>{S&&v?v(o):re(o)},[S,v]),Be=S?e.features||[]:te,k=P(o=>{if(!r||o.length===0)return;let s=De(o);s&&!s.isEmpty()&&r.fitBounds(s,{padding:50,duration:1e3,maxZoom:5})},[r]);X(()=>{var f,a,n,h,C,w,g,B,R,G;let o=z({containerId:"maplibre-map",latitude:(a=(f=e.defaultViewState)==null?void 0:f.latitude)!=null?a:0,longitude:(h=(n=e.defaultViewState)==null?void 0:n.longitude)!=null?h:0,zoom:(w=(C=e.defaultViewState)==null?void 0:C.zoom)!=null?w:0,pitch:(B=(g=e.defaultViewState)==null?void 0:g.pitch)!=null?B:0,bearing:(G=(R=e.defaultViewState)==null?void 0:R.bearing)!=null?G:0,mapstyle:ee}),s=new Y.NavigationControl({showCompass:!0,showZoom:!0,visualizePitch:!0});return o.addControl(s,"bottom-right"),o.once("style.load",()=>d(o)),()=>{s&&o&&o.removeControl(s)}},[]),X(()=>{var f;if(!r)return;let o=V(r);o.start(),j(o);let s=()=>{let a=o.getSnapshot(),n=a;if(!x&&a.length>1){n=[a[a.length-1]];let w=a.slice(0,-1).map(g=>g.id).filter(g=>g!==void 0);w.length>0&&o.removeFeatures(w)}I(n),y(n),$(n.find(h=>h.properties.selected)),n.length>0&&k(n)};return o.on("change",s),(f=e.features)!=null&&f.length&&setTimeout(()=>{if(o.getSnapshot().length===0){let a=Ce(e.features),n=a;!x&&a.length>1&&(n=[a[a.length-1]]),o.addFeatures(n),I(n),y(n),k(n)}},300),()=>{o.off("change",s),o.stop()}},[r,x,y,k]);let oe=P(o=>{p==null||p.setMode(o),c(o)},[p]);return Te("div",{children:[T("div",{ref:t,id:"maplibre-map",style:{width:"100%",height:"100vh"}}),p&&T(Pe,{children:T(U,{mode:i,changeMode:oe,draw:p})})]})},_=Le;import{jsx as Ne}from"react/jsx-runtime";var ut=e=>Ne(_,b({},e));export{ut as NakshaMaplibreDraw};

package/dist/index.js

@@ -1 +1 @@
-"use strict";var B=Object.create;var p=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames,D=Object.getOwnPropertySymbols,O=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty,U=Object.prototype.propertyIsEnumerable;var N=(e,t,r)=>t in e?p(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,n=(e,t)=>{for(var r in t||(t={}))P.call(t,r)&&N(e,r,t[r]);if(D)for(var r of D(t))U.call(t,r)&&N(e,r,t[r]);return e};var A=(e,t)=>{for(var r in t)p(e,r,{get:t[r],enumerable:!0})},F=(e,t,r,y)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of J(t))!P.call(e,o)&&o!==r&&p(e,o,{get:()=>t[o],enumerable:!(y=I(t,o))||y.enumerable});return e};var x=(e,t,r)=>(r=e!=null?B(O(e)):{},F(t||!e||!e.__esModule?p(r,"default",{value:e,enumerable:!0}):r,e)),H=e=>F(p({},"__esModule",{value:!0}),e);var q={};A(q,{NakshaMaplibreDraw:()=>Z});module.exports=H(q);var G=require("react-map-gl/maplibre");var h=require("@biodiv-platform/naksha-commons"),E=x(require("@turf/bbox")),l=require("react"),d=x(require("react-map-gl/maplibre"));var f=require("react-gbus"),V=require("react-map-gl/maplibre");var s=require("react/jsx-runtime");function b({onDelete:e}){return(0,s.jsx)("div",{className:"maplibregl-ctrl-top-left",style:{marginTop:"100px"},children:(0,s.jsx)("div",{className:"maplibregl-ctrl-group maplibregl-ctrl",children:(0,s.jsx)("button",{className:"maplibre-gl-draw_ctrl-draw-btn maplibre-gl-draw_trash",title:"Delete",onClick:e,style:{display:"flex",justifyContent:"center",alignItems:"center",width:"30px",height:"30px"},children:(0,s.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:(0,s.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 k=require("@watergis/maplibre-gl-terradraw"),L=require("react/jsx-runtime"),w="rmsc-draw-updated";function M(e){(0,f.useListener)(t,[w]);function t(o){var g;if(!r)return;let a=r.getFeatures().features,i=e.isMultiple?a:[a[a.length-1]];(g=e.setFeatures)==null||g.call(e,i)}let r=(0,V.useControl)(({map:o})=>{let a=new k.MaplibreTerradrawControl({modes:["point","linestring","polygon"],open:!0});return o.on("terradraw.create",i=>{e.isMultiple||a.terradraw.clear(),a.getTerraDrawInstance().setMode("select"),(0,f.emit)(w,i)}),o.on("terradraw.update",i=>(0,f.emit)(w,i)),o.on("terradraw.delete",i=>(0,f.emit)(w,i)),a},()=>{},{position:"top-left"});return(0,L.jsx)(b,{onDelete:()=>{var o;r.terradraw.clear(),(o=e.setFeatures)==null||o.call(e,[])}})}var c=require("react-map-gl/maplibre");var R={id:"data",type:"fill",paint:{"fill-color":"#f03b20","fill-opacity":.2},filter:["==",["geometry-type"],"Polygon"]},T={type:"circle",paint:{"circle-radius":8,"circle-color":"#f03b20","circle-opacity":.8},filter:["==",["geometry-type"],"Point"]},_={type:"line",paint:{"line-color":"#f03b20","line-width":1.6,"line-dasharray":[6,3],"line-opacity":.8},filter:["==",["geometry-type"],"LineString"]};var u=require("react/jsx-runtime");function C({features:e}){return e!=null&&e.length?(0,u.jsxs)(c.Source,{type:"geojson",data:{type:"FeatureCollection",features:e},children:[(0,u.jsx)(c.Layer,n({},T)),(0,u.jsx)(c.Layer,n({},_)),(0,u.jsx)(c.Layer,n({},R))]}):null}var m=require("react/jsx-runtime"),W=d.NavigationControl;function S(e){let{mapv:t}=(0,d.useMap)(),[r]=(0,l.useState)(h.defaultMapStyles[(e==null?void 0:e.mapStyle)||0].style),[y]=(0,l.useState)(e.defaultViewState||h.defaultViewState),[o,a]=(0,l.useState)(e.features||[]),i=()=>{if(!(o!=null&&o.length)||!t)return;let g=(0,E.default)({type:"FeatureCollection",features:o});t.fitBounds(g,{padding:40,duration:1e3})};return(0,l.useEffect)(()=>{e.onFeaturesChange&&e.onFeaturesChange(o),i()},[o]),(0,l.useEffect)(()=>{e.isControlled&&JSON.stringify(o)!==JSON.stringify(e.features)&&a(e.features||[])},[e.features]),(0,m.jsxs)(d.default,{id:"mapv",cursor:"default",initialViewState:y,style:{width:"100%",height:"100%"},mapStyle:r,onLoad:i,children:[(0,m.jsx)(W,{position:"bottom-right",showZoom:!0,showCompass:!0}),(0,m.jsx)(M,{features:o,setFeatures:a,isControlled:e.isControlled,isMultiple:e.isMultiple}),(0,m.jsx)(C,{features:o})]})}var v=require("react/jsx-runtime"),Z=e=>(0,v.jsx)(G.MapProvider,{children:(0,v.jsx)(S,n({},e))});0&&(module.exports={NakshaMaplibreDraw});
+"use strict";var ue=Object.create;var x=Object.defineProperty,de=Object.defineProperties,ce=Object.getOwnPropertyDescriptor,pe=Object.getOwnPropertyDescriptors,ge=Object.getOwnPropertyNames,V=Object.getOwnPropertySymbols,me=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty,fe=Object.prototype.propertyIsEnumerable;var z=(e,t,r)=>t in e?x(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,S=(e,t)=>{for(var r in t||(t={}))E.call(t,r)&&z(e,r,t[r]);if(V)for(var r of V(t))fe.call(t,r)&&z(e,r,t[r]);return e},T=(e,t)=>de(e,pe(t));var he=(e,t)=>{for(var r in t)x(e,r,{get:t[r],enumerable:!0})},W=(e,t,r,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of ge(t))!E.call(e,a)&&a!==r&&x(e,a,{get:()=>t[a],enumerable:!(c=ce(t,a))||c.enumerable});return e};var A=(e,t,r)=>(r=e!=null?ue(me(e)):{},W(t||!e||!e.__esModule?x(r,"default",{value:e,enumerable:!0}):r,e)),we=e=>W(x({},"__esModule",{value:!0}),e);var De={};he(De,{NakshaMaplibreDraw:()=>Ce});module.exports=we(De);var I=A(require("maplibre-gl"));var n=require("terra-draw"),H=require("terra-draw-maplibre-gl-adapter");function Z(e){return new n.TerraDraw({tracked:!0,adapter:new H.TerraDrawMapLibreGLAdapter({map:e,coordinatePrecision:9}),modes:[new n.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 n.TerraDrawPointMode,new n.TerraDrawLineStringMode({validation:(t,{updateType:r})=>r==="finish"||r==="commit"?(0,n.ValidateNotSelfIntersecting)(t):{valid:!0}}),new n.TerraDrawRectangleMode,new n.TerraDrawPolygonMode({pointerDistance:30,validation:(t,{updateType:r})=>r==="finish"||r==="commit"?(0,n.ValidateNotSelfIntersecting)(t):{valid:!0}}),new n.TerraDrawCircleMode,new n.TerraDrawFreehandMode({pointerDistance:5,validation:t=>(0,n.ValidateNotSelfIntersecting)(t)})]})}var i=require("react");var y=A(require("maplibre-gl"));function q({containerId:e,latitude:t=0,longitude:r=0,zoom:c,pitch:a,bearing:g,mapstyle:B}){return y.default.getRTLTextPluginStatus()==="unavailable"&&y.default.setRTLTextPlugin("https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js",!0),new y.default.Map({container:e,style:B,center:{lat:t,lng:r},zoom:c,pitch:a,bearing:g})}var l=require("react/jsx-runtime"),K=()=>(0,l.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,l.jsx)("path",{d:"M12.586 12.586 19 19"}),(0,l.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"})]}),Q=()=>(0,l.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,l.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,l.jsx)("circle",{cx:"12",cy:"10",r:"3"})]}),U=()=>(0,l.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:(0,l.jsx)("line",{x1:"4",y1:"20",x2:"20",y2:"4"})}),X=()=>(0,l.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:(0,l.jsx)("polygon",{points:"12,2 22,8 18,22 6,22 2,8"})}),Y=()=>(0,l.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:(0,l.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 N=require("react/jsx-runtime"),be=({draw:e})=>e?(0,N.jsx)("button",{onClick:()=>e.clear(),title:"Delete",style:{display:"flex",justifyContent:"center",alignItems:"center",width:"30px",height:"30px",padding:"0",borderRadius:"4px",backgroundColor:"#f0f0f0",cursor:"pointer"},children:(0,N.jsx)(Y,{})}):null,_=be;var $=require("react/jsx-runtime"),Me=({mode:e,currentMode:t,changeMode:r,icon:c,tooltip:a})=>(0,$.jsx)("button",{onClick:()=>r(e),title:a,style:{display:"flex",justifyContent:"center",alignItems:"center",width:"30px",height:"30px",padding:"0",borderRadius:"4px",backgroundColor:t===e?"#02cf87":"#f0f0f0",cursor:"pointer"},children:c}),v=Me;var d=require("react/jsx-runtime"),xe=({mode:e,changeMode:t,draw:r})=>(0,d.jsxs)("div",{style:{position:"absolute",top:"10px",left:"10px",display:"flex",flexDirection:"column",gap:"6px",zIndex:1e3,backgroundColor:"rgba(255, 255, 255, 0.9)",padding:"8px",borderRadius:"6px",boxShadow:"0 2px 6px rgba(0,0,0,0.2)"},children:[(0,d.jsx)(v,{mode:"select",icon:(0,d.jsx)(K,{}),currentMode:e,changeMode:t,tooltip:"Select"}),(0,d.jsx)(v,{mode:"point",icon:(0,d.jsx)(Q,{}),currentMode:e,changeMode:t,tooltip:"Point"}),(0,d.jsx)(v,{mode:"linestring",icon:(0,d.jsx)(U,{}),currentMode:e,changeMode:t,tooltip:"Line"}),(0,d.jsx)(v,{mode:"polygon",icon:(0,d.jsx)(X,{}),currentMode:e,changeMode:t,tooltip:"Polygon"}),r&&(0,d.jsx)(_,{draw:r})]}),j=xe;var ee=require("@biodiv-platform/naksha-commons");var m=require("react/jsx-runtime"),Se=e=>e.map(t=>{var a,g;if((a=t.properties)!=null&&a.mode)return t;let r=(g=t.geometry)==null?void 0:g.type,c=r==="Point"?"point":r==="Polygon"?"polygon":r==="LineString"?"linestring":"unknown";return T(S({},t),{properties:T(S({},t.properties),{mode:c})})}),ve=e=>{if(!e.length)return null;let t=new I.default.LngLatBounds;return e.forEach(r=>{ye(r).forEach(a=>{Array.isArray(a[0])?a.forEach(g=>t.extend(g)):t.extend(a)})}),t},ye=e=>{let t=e.geometry;switch(t.type){case"Point":return[t.coordinates];case"LineString":return[t.coordinates];case"Polygon":return t.coordinates;default:return[]}},ke=e=>{let t=(0,i.useRef)(null),[r,c]=(0,i.useState)(),[a,g]=(0,i.useState)("static"),[B,oe]=(0,i.useState)(),[Fe,R]=(0,i.useState)([]),[f,ne]=(0,i.useState)(),ae=ee.defaultMapStyles[(e==null?void 0:e.mapStyle)||0].style,{isMultiple:k=!0,isControlled:C=!1,setFeatures:D}=e,[ie,se]=(0,i.useState)([]),F=(0,i.useCallback)(o=>{C&&D?D(o):se(o)},[C,D]),Le=C?e.features||[]:ie,L=(0,i.useCallback)(o=>{if(!r||o.length===0)return;let p=ve(o);p&&!p.isEmpty()&&r.fitBounds(p,{padding:50,duration:1e3,maxZoom:5})},[r]);(0,i.useEffect)(()=>{var w,u,s,b,P,M,h,G,J,O;let o=q({containerId:"maplibre-map",latitude:(u=(w=e.defaultViewState)==null?void 0:w.latitude)!=null?u:0,longitude:(b=(s=e.defaultViewState)==null?void 0:s.longitude)!=null?b:0,zoom:(M=(P=e.defaultViewState)==null?void 0:P.zoom)!=null?M:0,pitch:(G=(h=e.defaultViewState)==null?void 0:h.pitch)!=null?G:0,bearing:(O=(J=e.defaultViewState)==null?void 0:J.bearing)!=null?O:0,mapstyle:ae}),p=new I.default.NavigationControl({showCompass:!0,showZoom:!0,visualizePitch:!0});return o.addControl(p,"bottom-right"),o.once("style.load",()=>c(o)),()=>{p&&o&&o.removeControl(p)}},[]),(0,i.useEffect)(()=>{var w;if(!r)return;let o=Z(r);o.start(),ne(o);let p=()=>{let u=o.getSnapshot(),s=u;if(!k&&u.length>1){s=[u[u.length-1]];let M=u.slice(0,-1).map(h=>h.id).filter(h=>h!==void 0);M.length>0&&o.removeFeatures(M)}R(s),F(s),oe(s.find(b=>b.properties.selected)),s.length>0&&L(s)};return o.on("change",p),(w=e.features)!=null&&w.length&&setTimeout(()=>{if(o.getSnapshot().length===0){let u=Se(e.features),s=u;!k&&u.length>1&&(s=[u[u.length-1]]),o.addFeatures(s),R(s),F(s),L(s)}},300),()=>{o.off("change",p),o.stop()}},[r,k,F,L]);let le=(0,i.useCallback)(o=>{f==null||f.setMode(o),g(o)},[f]);return(0,m.jsxs)("div",{children:[(0,m.jsx)("div",{ref:t,id:"maplibre-map",style:{width:"100%",height:"100vh"}}),f&&(0,m.jsx)(m.Fragment,{children:(0,m.jsx)(j,{mode:a,changeMode:le,draw:f})})]})},te=ke;var re=require("react/jsx-runtime"),Ce=e=>(0,re.jsx)(te,S({},e));0&&(module.exports={NakshaMaplibreDraw});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@biodiv-platform/naksha-maplibre-draw",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "author": "harshzalavadiya",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",
@@ -20,7 +20,8 @@
   "peerDependencies": {
     "maplibre-gl": "^5.7.0",
     "react": ">=18",
-    "react-map-gl": "^8.0.4"
+    "react-map-gl": "^8.0.4",
+    "react-icons": "^5.5.0"
   },
   "devDependencies": {
     "@biodiv-platform/eslint-preset": "*",
@@ -31,13 +32,15 @@
     "react": ">=18",
     "react-map-gl": "^8.0.4",
     "tsup": "^6.1.2",
-    "typescript": "^4.7.3"
+    "typescript": "^4.7.3",
+    "react-icons": "^5.5.0"
   },
   "dependencies": {
     "@biodiv-platform/naksha-commons": "5.0.0-beta.1",
     "@turf/bbox": "^6.5.0",
-    "@watergis/maplibre-gl-terradraw": "^1.7.2",
     "boundingbox": "^1.4.0",
-    "react-gbus": "^1.1.2"
+    "react-gbus": "^1.1.2",
+    "terra-draw": "^1.13.0",
+    "terra-draw-maplibre-gl-adapter": "^1.1.2"
   }
 }