@watergis/maplibre-gl-terradraw 0.0.6 → 0.1.0

package/dist/maplibre-gl-terradraw.es.js

@@ -515,7 +515,7 @@ var Qt = class {
     return this.getPointResolutionFunc_;
   }
 };
-const J = 6378137, T = Math.PI * J, Pe = [-T, -T, T, T], Me = [-180, -85, 180, 85], it = J * Math.log(Math.tan(Math.PI / 2));
+const J = 6378137, X = Math.PI * J, Pe = [-X, -X, X, X], Me = [-180, -85, 180, 85], it = J * Math.log(Math.tan(Math.PI / 2));
 class V extends Qt {
   constructor(t) {
     super({ code: t, units: "m", extent: Pe, global: !0, worldExtent: Me, getPointResolution: function(e, i) {
@@ -557,7 +557,7 @@ jt(Ft), jt(Ot), Lt = Ft, Wt = function(s, t, e) {
   const i = s.length;
   e = e > 1 ? e : 2, t === void 0 && (t = e > 2 ? s.slice() : new Array(i));
   for (let o = 0; o < i; o += e) {
-    t[o] = T * s[o] / 180;
+    t[o] = X * s[o] / 180;
     let n = J * Math.log(Math.tan(Math.PI * (+s[o + 1] + 90) / 360));
     n > it ? n = it : n < -it && (n = -it), t[o + 1] = n;
   }
@@ -565,7 +565,7 @@ jt(Ft), jt(Ot), Lt = Ft, Wt = function(s, t, e) {
 }, Bt = function(s, t, e) {
   const i = s.length;
   e = e > 1 ? e : 2, t === void 0 && (t = e > 2 ? s.slice() : new Array(i));
-  for (let o = 0; o < i; o += e) t[o] = 180 * s[o] / T, t[o + 1] = 360 * Math.atan(Math.exp(s[o + 1] / J)) / Math.PI - 90;
+  for (let o = 0; o < i; o += e) t[o] = 180 * s[o] / X, t[o + 1] = 360 * Math.atan(Math.exp(s[o + 1] / J)) / Math.PI - 90;
   return t;
 }, Ot.forEach(function(s) {
   Lt.forEach(function(t) {
@@ -689,13 +689,13 @@ function w(s) {
 function ee(s) {
   return s / (Mt / 1e3);
 }
-function X(s) {
+function T(s) {
   return s % (2 * Math.PI) * 180 / Math.PI;
 }
 const At = 57.29577951308232, Vt = 0.017453292519943295, lt = 6378137, P = (s, t) => ({ x: s === 0 ? 0 : s * Vt * lt, y: t === 0 ? 0 : Math.log(Math.tan(Math.PI / 4 + t * Vt / 2)) * lt }), j = (s, t) => ({ lng: s === 0 ? 0 : At * (s / lt), lat: t === 0 ? 0 : (2 * Math.atan(Math.exp(t / lt)) - Math.PI / 2) * At });
 function Se(s, t, e) {
   const i = w(s[0]), o = w(s[1]), n = w(e), r = ee(t), a = Math.asin(Math.sin(o) * Math.cos(r) + Math.cos(o) * Math.sin(r) * Math.cos(n));
-  return [X(i + Math.atan2(Math.sin(n) * Math.sin(r) * Math.cos(o), Math.cos(r) - Math.sin(o) * Math.sin(a))), X(a)];
+  return [T(i + Math.atan2(Math.sin(n) * Math.sin(r) * Math.cos(o), Math.cos(r) - Math.sin(o) * Math.sin(a))), T(a)];
 }
 function Rt(s) {
   const { center: t, radiusKilometers: e, coordinatePrecision: i } = s, o = s.steps ? s.steps : 64, n = [];
@@ -958,17 +958,17 @@ class se extends D {
     }), n.coord;
   }
 }
-function Tt(s, t, e) {
+function Xt(s, t, e) {
   const i = w(s[0]), o = w(s[1]), n = w(e), r = ee(t), a = Math.asin(Math.sin(o) * Math.cos(r) + Math.cos(o) * Math.sin(r) * Math.cos(n));
-  return [X(i + Math.atan2(Math.sin(n) * Math.sin(r) * Math.cos(o), Math.cos(r) - Math.sin(o) * Math.sin(a))), X(a)];
+  return [T(i + Math.atan2(Math.sin(n) * Math.sin(r) * Math.cos(o), Math.cos(r) - Math.sin(o) * Math.sin(a))), T(a)];
 }
-function Xt({ x: s, y: t }, e, i) {
+function Tt({ x: s, y: t }, e, i) {
   const o = w(i);
   return { x: s + e * Math.cos(o), y: t + e * Math.sin(o) };
 }
 function Kt(s, t) {
   const e = w(s[0]), i = w(t[0]), o = w(s[1]), n = w(t[1]), r = Math.sin(i - e) * Math.cos(n), a = Math.cos(o) * Math.sin(n) - Math.sin(o) * Math.cos(n) * Math.cos(i - e);
-  return X(Math.atan2(r, a));
+  return T(Math.atan2(r, a));
 }
 function ht({ x: s, y: t }, { x: e, y: i }) {
   let o = Math.atan2(i - t, e - s);
@@ -980,9 +980,9 @@ function De(s, t, e) {
   for (let h = 0; h < s.length && !(t >= l && h === s.length - 1); h++) {
     if (l > t && i.length === 0) {
       if (n = t - l, !n) return i.push(s[h]), i;
-      r = Kt(s[h], s[h - 1]) - 180, a = Tt(s[h], n, r), i.push(a);
+      r = Kt(s[h], s[h - 1]) - 180, a = Xt(s[h], n, r), i.push(a);
     }
-    if (l >= e) return n = e - l, n ? (r = Kt(s[h], s[h - 1]) - 180, a = Tt(s[h], n, r), i.push(a), i) : (i.push(s[h]), i);
+    if (l >= e) return n = e - l, n ? (r = Kt(s[h], s[h - 1]) - 180, a = Xt(s[h], n, r), i.push(a), i) : (i.push(s[h]), i);
     if (l >= t && i.push(s[h]), h === s.length - 1) return i;
     l += W(s[h], s[h + 1]);
   }
@@ -1431,7 +1431,7 @@ function dt(s, t) {
   const e = s, i = t, o = w(e[1]), n = w(i[1]);
   let r = w(i[0] - e[0]);
   r > Math.PI && (r -= 2 * Math.PI), r < -Math.PI && (r += 2 * Math.PI);
-  const a = Math.log(Math.tan(n / 2 + Math.PI / 4) / Math.tan(o / 2 + Math.PI / 4)), l = (X(Math.atan2(r, a)) + 360) % 360;
+  const a = Math.log(Math.tan(n / 2 + Math.PI / 4) / Math.tan(o / 2 + Math.PI / 4)), l = (T(Math.atan2(r, a)) + 360) % 360;
   return l > 180 ? -(360 - l) : l;
 }
 function Et(s, t, e) {
@@ -1675,7 +1675,7 @@ function ut(s) {
     return { x: o / i, y: n / i };
   }(t);
 }
-class Te extends D {
+class Xe extends D {
   constructor(t, e, i) {
     super(t), this.config = void 0, this.selectionPoints = void 0, this.midPoints = void 0, this.lastBearing = void 0, this.config = t, this.selectionPoints = e, this.midPoints = i;
   }
@@ -1718,7 +1718,7 @@ class Te extends D {
     this.store.updateGeometry([{ id: e, geometry: o }, ...h, ...d]), this.projection === "web-mercator" ? this.lastBearing = r : this.projection === "globe" && (this.lastBearing = r + 180);
   }
 }
-class Xe extends D {
+class Te extends D {
   constructor(t, e, i) {
     super(t), this.config = void 0, this.selectionPoints = void 0, this.midPoints = void 0, this.lastDistance = void 0, this.config = t, this.selectionPoints = e, this.midPoints = i;
   }
@@ -1947,7 +1947,7 @@ class Ye extends Ee {
     this._state = "selecting";
   }
   registerBehaviors(t) {
-    this.pixelDistance = new pt(t), this.clickBoundingBox = new bt(t), this.featuresAtMouseEvent = new Ve(t, this.clickBoundingBox, this.pixelDistance), this.selectionPoints = new Ae(t), this.midPoints = new Ge(t, this.selectionPoints), this.rotateFeature = new Te(t, this.selectionPoints, this.midPoints), this.scaleFeature = new Xe(t, this.selectionPoints, this.midPoints), this.dragFeature = new Re(t, this.featuresAtMouseEvent, this.selectionPoints, this.midPoints), this.dragCoordinate = new Ue(t, this.pixelDistance, this.selectionPoints, this.midPoints), this.dragCoordinateResizeFeature = new Ke(t, this.pixelDistance, this.selectionPoints, this.midPoints);
+    this.pixelDistance = new pt(t), this.clickBoundingBox = new bt(t), this.featuresAtMouseEvent = new Ve(t, this.clickBoundingBox, this.pixelDistance), this.selectionPoints = new Ae(t), this.midPoints = new Ge(t, this.selectionPoints), this.rotateFeature = new Xe(t, this.selectionPoints, this.midPoints), this.scaleFeature = new Te(t, this.selectionPoints, this.midPoints), this.dragFeature = new Re(t, this.featuresAtMouseEvent, this.selectionPoints, this.midPoints), this.dragCoordinate = new Ue(t, this.pixelDistance, this.selectionPoints, this.midPoints), this.dragCoordinateResizeFeature = new Ke(t, this.pixelDistance, this.selectionPoints, this.midPoints);
   }
   deselectFeature() {
     this.deselect();
@@ -2525,7 +2525,7 @@ class ii extends O {
       const o = e[0], n = e[1], r = re(o, n, this.coordinatePrecision, this.project, this.unproject), a = P(o[0], o[1]), l = P(r[0], r[1]), d = P(n[0], n[1]), h = P(t.lng, t.lat), c = I(h, a) < I(h, d), u = $t(a, l, h), g = c ? 90 - u : $t(a, l, h) - 90, p = I(l, h), y = Math.cos(w(g)) * p, v = ht(a, d) + (function(_, S, F) {
         const B = (F.x - S.x) * (_.y - S.y) - (F.y - S.y) * (_.x - S.x);
         return B > 1e-10 ? "left" : B < -1e-10 ? "right" : "left";
-      }(a, d, h) === "right" ? -90 : 90), m = Xt(a, y, v), x = Xt(d, y, v), M = j(m.x, m.y), E = j(x.x, x.y);
+      }(a, d, h) === "right" ? -90 : 90), m = Tt(a, y, v), x = Tt(d, y, v), M = j(m.x, m.y), E = j(x.x, x.y);
       i = [e[0], e[1], [E.lng, E.lat], [M.lng, M.lat], e[0]];
     }
     i && this.updatePolygonGeometry(this.currentId, i, C.Provisional);
@@ -2740,115 +2740,120 @@ class oi {
   }
 }
 const si = {
-  point: !0,
-  line: !0,
-  polygon: !0,
-  rectangle: !0,
-  circle: !0,
-  freehand: !0,
-  angledRectangle: !0,
-  select: !0,
+  modes: [
+    "point",
+    "linestring",
+    "polygon",
+    "rectangle",
+    "angled-rectangle",
+    "circle",
+    "freehand",
+    "select"
+  ],
   open: !1
-}, ni = (s) => {
-  const t = [];
-  return t.push(
-    new Be({
-      modeName: "render",
-      styles: {}
-    })
-  ), s.point === !0 && t.push(new Oe()), s.line === !0 && t.push(new ke()), s.polygon === !0 && t.push(
-    new Le({
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      validation: (e, i) => {
-        const o = i.updateType;
-        return o === "finish" || o === "commit" ? ei(e) : !0;
-      }
-    })
-  ), s.rectangle === !0 && t.push(new We()), s.angledRectangle === !0 && t.push(new ii()), s.circle === !0 && t.push(new we()), s.freehand === !0 && t.push(new Ie()), s.select === !0 && t.push(
-    new Ye({
-      flags: {
-        point: {
-          feature: {
-            draggable: !0
-          }
-        },
-        polygon: {
-          feature: {
+}, ni = () => ({
+  render: new Be({
+    modeName: "render",
+    styles: {}
+  }),
+  point: new Oe(),
+  linestring: new ke(),
+  polygon: new Le({
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    validation: (t, e) => {
+      const i = e.updateType;
+      return i === "finish" || i === "commit" ? ei(t) : !0;
+    }
+  }),
+  rectangle: new We(),
+  "angled-rectangle": new ii(),
+  circle: new we(),
+  freehand: new Ie(),
+  select: new Ye({
+    flags: {
+      point: {
+        feature: {
+          draggable: !0
+        }
+      },
+      polygon: {
+        feature: {
+          draggable: !0,
+          rotateable: !0,
+          scaleable: !0,
+          coordinates: {
+            midpoints: !0,
             draggable: !0,
-            rotateable: !0,
-            scaleable: !0,
-            coordinates: {
-              midpoints: !0,
-              draggable: !0,
-              deletable: !0
-            }
+            deletable: !0
           }
-        },
-        linestring: {
-          feature: {
+        }
+      },
+      linestring: {
+        feature: {
+          draggable: !0,
+          coordinates: {
+            midpoints: !0,
             draggable: !0,
-            coordinates: {
-              midpoints: !0,
-              draggable: !0,
-              deletable: !0
-            }
+            deletable: !0
           }
-        },
-        freehand: {
-          feature: {
+        }
+      },
+      freehand: {
+        feature: {
+          draggable: !0,
+          coordinates: {
+            midpoints: !0,
             draggable: !0,
-            coordinates: {
-              midpoints: !0,
-              draggable: !0,
-              deletable: !0
-            }
+            deletable: !0
           }
-        },
-        circle: {
-          feature: {
+        }
+      },
+      circle: {
+        feature: {
+          draggable: !0,
+          coordinates: {
+            midpoints: !0,
             draggable: !0,
-            coordinates: {
-              midpoints: !0,
-              draggable: !0,
-              deletable: !0
-            }
+            deletable: !0
           }
-        },
-        rectangle: {
-          feature: {
+        }
+      },
+      rectangle: {
+        feature: {
+          draggable: !0,
+          rotateable: !0,
+          scaleable: !0,
+          coordinates: {
+            midpoints: !0,
             draggable: !0,
-            rotateable: !0,
-            scaleable: !0,
-            coordinates: {
-              midpoints: !0,
-              draggable: !0,
-              deletable: !0
-            }
+            deletable: !0
           }
-        },
-        "angled-rectangle": {
-          feature: {
+        }
+      },
+      "angled-rectangle": {
+        feature: {
+          draggable: !0,
+          rotateable: !0,
+          scaleable: !0,
+          coordinates: {
+            midpoints: !0,
             draggable: !0,
-            rotateable: !0,
-            scaleable: !0,
-            coordinates: {
-              midpoints: !0,
-              draggable: !0,
-              deletable: !0
-            }
+            deletable: !0
           }
         }
       }
-    })
-  ), t;
-};
+    }
+  })
+});
 class ai {
   /**
    * Constructor
    * @param options Plugin control options
+   * @param modeOptions Overwrite Terra Draw mode options if you specified.
+   *
    */
-  constructor(t) {
+  constructor(t, e) {
     k(this, "controlContainer");
     k(this, "map");
     k(this, "addButton");
@@ -2858,26 +2863,30 @@ class ai {
     k(this, "activeMode");
     k(this, "terradraw");
     k(this, "options", si);
-    this.modeButtons = {}, this.activeMode = "render", t && (this.options = Object.assign(this.options, t));
+    k(this, "modeOptions");
+    this.modeButtons = {}, this.activeMode = "render", t && (this.options = Object.assign(this.options, t)), this.modeOptions = e;
   }
   getDefaultPosition() {
     return "top-right";
   }
   onAdd(t) {
-    this.map = t;
-    const e = ni(this.options);
-    if (e.length === 0)
+    var o, n;
+    if (this.options && this.options.modes && this.options.modes.length === 0)
       throw new Error("At least a mode must be enabled.");
-    return this.isExpanded = this.options.open === !0, this.terradraw = new oi({
+    this.map = t;
+    const e = ni(), i = [e.render];
+    return (n = (o = this.options) == null ? void 0 : o.modes) == null || n.forEach((r) => {
+      this.modeOptions && this.modeOptions[r] ? i.push(this.modeOptions[r]) : e[r] && i.push(e[r]);
+    }), this.isExpanded = this.options.open === !0, this.terradraw = new oi({
       adapter: new pe({ map: t }),
-      modes: e
-    }), this.terradraw.start(), this.controlContainer = document.createElement("div"), this.controlContainer.classList.add("maplibregl-ctrl"), this.controlContainer.classList.add("maplibregl-ctrl-group"), this.addButton = document.createElement("button"), this.addButton.classList.add("maplibregl-terradraw-add-button"), this.isExpanded && this.addButton.classList.add("enabled"), this.addButton.type = "button", this.addButton.addEventListener("click", this.toggleEditor.bind(this)), e.forEach((i) => {
-      i.mode !== "render" && this.addTerradrawButton(i.mode);
+      modes: i
+    }), this.terradraw.start(), this.controlContainer = document.createElement("div"), this.controlContainer.classList.add("maplibregl-ctrl"), this.controlContainer.classList.add("maplibregl-ctrl-group"), this.addButton = document.createElement("button"), this.addButton.classList.add("maplibregl-terradraw-add-button"), this.isExpanded && this.addButton.classList.add("enabled"), this.addButton.type = "button", this.addButton.addEventListener("click", this.toggleEditor.bind(this)), i.forEach((r) => {
+      r.mode !== "render" && this.addTerradrawButton(r.mode);
     }), this.deleteButton = document.createElement("button"), this.deleteButton.classList.add("maplibregl-terradraw-add-control"), this.deleteButton.classList.add("maplibregl-terradraw-delete-button"), this.isExpanded || this.deleteButton.classList.add("hidden"), this.deleteButton.type = "button", this.deleteButton.addEventListener("click", () => {
       this.terradraw && this.terradraw.enabled && (this.terradraw.clear(), this.deactivate());
-    }), this.controlContainer.appendChild(this.addButton), Object.values(this.modeButtons).forEach((i) => {
-      var o;
-      (o = this.controlContainer) == null || o.appendChild(i);
+    }), this.controlContainer.appendChild(this.addButton), Object.values(this.modeButtons).forEach((r) => {
+      var a;
+      (a = this.controlContainer) == null || a.appendChild(r);
     }), this.controlContainer.appendChild(this.deleteButton), this.controlContainer;
   }
   onRemove() {