@biodiv-platform/naksha-maplibre-draw 5.0.0

package/README.md

@@ -0,0 +1,9 @@
+# @biodiv-platform/naksha-maplibre-draw
+
+draw polygons over maplibre-gl
+
+## Installing
+
+```sh
+yarn add @biodiv-platform/naksha-maplibre-draw react-map-gl
+```

package/dist/esm/index.js

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

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import { MapStyles } from '@biodiv-platform/naksha-commons';
+import { ViewState } from 'react-map-gl/maplibre';
+
+interface NakshaMaplibreViewProps {
+    defaultViewState?: Partial<ViewState>;
+    mapStyle?: MapStyles;
+    features?: any;
+    onFeaturesChange?: any;
+    isControlled?: boolean;
+    isMultiple?: boolean;
+}
+
+declare const NakshaMaplibreDraw: (props: NakshaMaplibreViewProps) => JSX.Element;
+
+export { NakshaMaplibreDraw };

package/dist/index.js

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

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@biodiv-platform/naksha-maplibre-draw",
+  "version": "5.0.0",
+  "author": "harshzalavadiya",
+  "main": "./dist/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "license": "Apache-2.0",
+  "repository": "strandls/naksha-components-react",
+  "files": [
+    "dist/**",
+    "locales/**"
+  ],
+  "scripts": {
+    "clean": "rm -rf node_modules dist .turbo",
+    "build": "tsup src/index.tsx --legacy-output --minify --format esm,cjs --dts --external react",
+    "dev": "tsup src/index.tsx --legacy-output --format esm,cjs --watch --dts --external react"
+  },
+  "peerDependencies": {
+    "maplibre-gl": "^5.7.0",
+    "react": ">=18",
+    "react-map-gl": "^8.0.4"
+  },
+  "devDependencies": {
+    "@biodiv-platform/eslint-preset": "*",
+    "@biodiv-platform/tsconfig": "*",
+    "@types/react": "^18.0.13",
+    "@types/react-dom": "^18.0.5",
+    "maplibre-gl": "^5.7.0",
+    "react": ">=18",
+    "react-map-gl": "^8.0.4",
+    "tsup": "^6.1.2",
+    "typescript": "^4.7.3"
+  },
+  "dependencies": {
+    "@biodiv-platform/naksha-commons": "*",
+    "@turf/bbox": "^6.5.0",
+    "@watergis/maplibre-gl-terradraw": "^1.7.2",
+    "boundingbox": "^1.4.0",
+    "react-gbus": "^1.1.2"
+  }
+}