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

package/dist/esm/index.js

@@ -1,219 +1 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-
-// src/index.tsx
-import { MapProvider } from "react-map-gl/maplibre";
-
-// src/components/map.tsx
-import {
-  defaultMapStyles,
-  defaultViewState
-} from "@biodiv-platform/naksha-commons";
-import bbox from "@turf/bbox";
-import { useEffect, useState } from "react";
-import MapGL, { NavigationControl, useMap } from "react-map-gl/maplibre";
-
-// src/components/draw-control.tsx
-import { MaplibreTerradrawControl } from "@watergis/maplibre-gl-terradraw";
-import { emit, useListener } from "react-gbus";
-import { useControl } from "react-map-gl/maplibre";
-
-// src/components/delete-panel.tsx
-import { jsx } from "react/jsx-runtime";
-function DeletePanel({ onDelete }) {
-  return /* @__PURE__ */ jsx("div", {
-    className: "maplibregl-ctrl-top-left",
-    style: { marginTop: "100px" },
-    children: /* @__PURE__ */ jsx("div", {
-      className: "maplibregl-ctrl-group maplibregl-ctrl",
-      children: /* @__PURE__ */ jsx("button", {
-        className: "maplibre-gl-draw_ctrl-draw-btn maplibre-gl-draw_trash",
-        title: "Delete",
-        onClick: onDelete,
-        style: {
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          width: "30px",
-          height: "30px"
-        },
-        children: /* @__PURE__ */ jsx("svg", {
-          width: "16",
-          height: "16",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          children: /* @__PURE__ */ 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"
-          })
-        })
-      })
-    })
-  });
-}
-
-// src/components/draw-control.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var UPDATE_EVENT = "rmsc-draw-updated";
-function DrawControl(props) {
-  useListener(onUpdate, [UPDATE_EVENT]);
-  function onUpdate(e) {
-    var _a;
-    if (!terradrawControl)
-      return;
-    const allFeatures = terradrawControl.getFeatures().features;
-    const _features = props.isMultiple ? allFeatures : [allFeatures[allFeatures.length - 1]];
-    (_a = props.setFeatures) == null ? void 0 : _a.call(props, _features);
-  }
-  const terradrawControl = useControl(
-    ({ map }) => {
-      const ctrl = new MaplibreTerradrawControl({
-        modes: ["point", "linestring", "polygon"],
-        open: true
-      });
-      map.on("terradraw.create", (e) => {
-        if (!props.isMultiple) {
-          ctrl.terradraw.clear();
-        }
-        ctrl.getTerraDrawInstance().setMode("select");
-        emit(UPDATE_EVENT, e);
-      });
-      map.on("terradraw.update", (e) => emit(UPDATE_EVENT, e));
-      map.on("terradraw.delete", (e) => emit(UPDATE_EVENT, e));
-      return ctrl;
-    },
-    () => {
-    },
-    { position: "top-left" }
-  );
-  const onDelete = () => {
-    var _a;
-    terradrawControl.terradraw.clear();
-    (_a = props.setFeatures) == null ? void 0 : _a.call(props, []);
-  };
-  return /* @__PURE__ */ jsx2(DeletePanel, {
-    onDelete
-  });
-}
-
-// src/components/geojson-layer.tsx
-import { Layer, Source } from "react-map-gl/maplibre";
-
-// src/static/constants.tsx
-var featureStyle = {
-  id: "data",
-  type: "fill",
-  paint: {
-    "fill-color": "#f03b20",
-    "fill-opacity": 0.2
-  },
-  filter: ["==", ["geometry-type"], "Polygon"]
-};
-var pointStyle = {
-  type: "circle",
-  paint: {
-    "circle-radius": 8,
-    "circle-color": "#f03b20",
-    "circle-opacity": 0.8
-  },
-  filter: ["==", ["geometry-type"], "Point"]
-};
-var lineStyle = {
-  type: "line",
-  paint: {
-    "line-color": "#f03b20",
-    "line-width": 1.6,
-    "line-dasharray": [6, 3],
-    "line-opacity": 0.8
-  },
-  filter: ["==", ["geometry-type"], "LineString"]
-};
-
-// src/components/geojson-layer.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-function GeojsonLayer({ features }) {
-  if (!(features == null ? void 0 : features.length))
-    return null;
-  return /* @__PURE__ */ jsxs(Source, {
-    type: "geojson",
-    data: { type: "FeatureCollection", features },
-    children: [
-      /* @__PURE__ */ jsx3(Layer, __spreadValues({}, pointStyle)),
-      /* @__PURE__ */ jsx3(Layer, __spreadValues({}, lineStyle)),
-      /* @__PURE__ */ jsx3(Layer, __spreadValues({}, featureStyle))
-    ]
-  });
-}
-
-// src/components/map.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var NavControl = NavigationControl;
-function Map(props) {
-  const { mapv } = useMap();
-  const [mapStyle] = useState(defaultMapStyles[(props == null ? void 0 : props.mapStyle) || 0].style);
-  const [viewState] = useState(props.defaultViewState || defaultViewState);
-  const [features, setFeatures] = useState(props.features || []);
-  const autoFocus = () => {
-    if (!(features == null ? void 0 : features.length) || !mapv)
-      return;
-    const _bbox = bbox({ type: "FeatureCollection", features });
-    mapv.fitBounds(_bbox, { padding: 40, duration: 1e3 });
-  };
-  useEffect(() => {
-    props.onFeaturesChange && props.onFeaturesChange(features);
-    autoFocus();
-  }, [features]);
-  useEffect(() => {
-    if (props.isControlled && JSON.stringify(features) !== JSON.stringify(props.features)) {
-      setFeatures(props.features || []);
-    }
-  }, [props.features]);
-  return /* @__PURE__ */ jsxs2(MapGL, {
-    id: "mapv",
-    cursor: "default",
-    initialViewState: viewState,
-    style: { width: "100%", height: "100%" },
-    mapStyle,
-    onLoad: autoFocus,
-    children: [
-      /* @__PURE__ */ jsx4(NavControl, {
-        position: "bottom-right",
-        showZoom: true,
-        showCompass: true
-      }),
-      /* @__PURE__ */ jsx4(DrawControl, {
-        features,
-        setFeatures,
-        isControlled: props.isControlled,
-        isMultiple: props.isMultiple
-      }),
-      /* @__PURE__ */ jsx4(GeojsonLayer, {
-        features
-      })
-    ]
-  });
-}
-
-// src/index.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var NakshaMaplibreDraw = (props) => /* @__PURE__ */ jsx5(MapProvider, {
-  children: /* @__PURE__ */ jsx5(Map, __spreadValues({}, props))
-});
-export {
-  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,244 +1 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.tsx
-var src_exports = {};
-__export(src_exports, {
-  NakshaMaplibreDraw: () => NakshaMaplibreDraw
-});
-module.exports = __toCommonJS(src_exports);
-var import_maplibre4 = require("react-map-gl/maplibre");
-
-// src/components/map.tsx
-var import_naksha_commons = require("@biodiv-platform/naksha-commons");
-var import_bbox = __toESM(require("@turf/bbox"));
-var import_react = require("react");
-var import_maplibre3 = __toESM(require("react-map-gl/maplibre"));
-
-// src/components/draw-control.tsx
-var import_maplibre_gl_terradraw = require("@watergis/maplibre-gl-terradraw");
-var import_react_gbus = require("react-gbus");
-var import_maplibre = require("react-map-gl/maplibre");
-
-// src/components/delete-panel.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function DeletePanel({ onDelete }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-    className: "maplibregl-ctrl-top-left",
-    style: { marginTop: "100px" },
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-      className: "maplibregl-ctrl-group maplibregl-ctrl",
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-        className: "maplibre-gl-draw_ctrl-draw-btn maplibre-gl-draw_trash",
-        title: "Delete",
-        onClick: onDelete,
-        style: {
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          width: "30px",
-          height: "30px"
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
-          width: "16",
-          height: "16",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          children: /* @__PURE__ */ (0, import_jsx_runtime.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"
-          })
-        })
-      })
-    })
-  });
-}
-
-// src/components/draw-control.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var UPDATE_EVENT = "rmsc-draw-updated";
-function DrawControl(props) {
-  (0, import_react_gbus.useListener)(onUpdate, [UPDATE_EVENT]);
-  function onUpdate(e) {
-    var _a;
-    if (!terradrawControl)
-      return;
-    const allFeatures = terradrawControl.getFeatures().features;
-    const _features = props.isMultiple ? allFeatures : [allFeatures[allFeatures.length - 1]];
-    (_a = props.setFeatures) == null ? void 0 : _a.call(props, _features);
-  }
-  const terradrawControl = (0, import_maplibre.useControl)(
-    ({ map }) => {
-      const ctrl = new import_maplibre_gl_terradraw.MaplibreTerradrawControl({
-        modes: ["point", "linestring", "polygon"],
-        open: true
-      });
-      map.on("terradraw.create", (e) => {
-        if (!props.isMultiple) {
-          ctrl.terradraw.clear();
-        }
-        ctrl.getTerraDrawInstance().setMode("select");
-        (0, import_react_gbus.emit)(UPDATE_EVENT, e);
-      });
-      map.on("terradraw.update", (e) => (0, import_react_gbus.emit)(UPDATE_EVENT, e));
-      map.on("terradraw.delete", (e) => (0, import_react_gbus.emit)(UPDATE_EVENT, e));
-      return ctrl;
-    },
-    () => {
-    },
-    { position: "top-left" }
-  );
-  const onDelete = () => {
-    var _a;
-    terradrawControl.terradraw.clear();
-    (_a = props.setFeatures) == null ? void 0 : _a.call(props, []);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DeletePanel, {
-    onDelete
-  });
-}
-
-// src/components/geojson-layer.tsx
-var import_maplibre2 = require("react-map-gl/maplibre");
-
-// src/static/constants.tsx
-var featureStyle = {
-  id: "data",
-  type: "fill",
-  paint: {
-    "fill-color": "#f03b20",
-    "fill-opacity": 0.2
-  },
-  filter: ["==", ["geometry-type"], "Polygon"]
-};
-var pointStyle = {
-  type: "circle",
-  paint: {
-    "circle-radius": 8,
-    "circle-color": "#f03b20",
-    "circle-opacity": 0.8
-  },
-  filter: ["==", ["geometry-type"], "Point"]
-};
-var lineStyle = {
-  type: "line",
-  paint: {
-    "line-color": "#f03b20",
-    "line-width": 1.6,
-    "line-dasharray": [6, 3],
-    "line-opacity": 0.8
-  },
-  filter: ["==", ["geometry-type"], "LineString"]
-};
-
-// src/components/geojson-layer.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function GeojsonLayer({ features }) {
-  if (!(features == null ? void 0 : features.length))
-    return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_maplibre2.Source, {
-    type: "geojson",
-    data: { type: "FeatureCollection", features },
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_maplibre2.Layer, __spreadValues({}, pointStyle)),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_maplibre2.Layer, __spreadValues({}, lineStyle)),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_maplibre2.Layer, __spreadValues({}, featureStyle))
-    ]
-  });
-}
-
-// src/components/map.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var NavControl = import_maplibre3.NavigationControl;
-function Map(props) {
-  const { mapv } = (0, import_maplibre3.useMap)();
-  const [mapStyle] = (0, import_react.useState)(import_naksha_commons.defaultMapStyles[(props == null ? void 0 : props.mapStyle) || 0].style);
-  const [viewState] = (0, import_react.useState)(props.defaultViewState || import_naksha_commons.defaultViewState);
-  const [features, setFeatures] = (0, import_react.useState)(props.features || []);
-  const autoFocus = () => {
-    if (!(features == null ? void 0 : features.length) || !mapv)
-      return;
-    const _bbox = (0, import_bbox.default)({ type: "FeatureCollection", features });
-    mapv.fitBounds(_bbox, { padding: 40, duration: 1e3 });
-  };
-  (0, import_react.useEffect)(() => {
-    props.onFeaturesChange && props.onFeaturesChange(features);
-    autoFocus();
-  }, [features]);
-  (0, import_react.useEffect)(() => {
-    if (props.isControlled && JSON.stringify(features) !== JSON.stringify(props.features)) {
-      setFeatures(props.features || []);
-    }
-  }, [props.features]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_maplibre3.default, {
-    id: "mapv",
-    cursor: "default",
-    initialViewState: viewState,
-    style: { width: "100%", height: "100%" },
-    mapStyle,
-    onLoad: autoFocus,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NavControl, {
-        position: "bottom-right",
-        showZoom: true,
-        showCompass: true
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DrawControl, {
-        features,
-        setFeatures,
-        isControlled: props.isControlled,
-        isMultiple: props.isMultiple
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GeojsonLayer, {
-        features
-      })
-    ]
-  });
-}
-
-// src/index.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var NakshaMaplibreDraw = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_maplibre4.MapProvider, {
-  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Map, __spreadValues({}, props))
-});
-// Annotate the CommonJS export names for ESM import in node:
-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.0",
+  "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": "*",
+    "@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"
   }
 }