maplibre-gl-components 0.22.6 → 0.22.7

package/dist/{ControlGrid-BX81K4Oc.js → ControlGrid-B-8T7XE1.js}

@@ -5115,6 +5115,7 @@ var xO = class {
   _boundClickHandler;
   _boundMoveHandler;
   _boundDblClickHandler;
+  _boundContextMenuHandler;
   _boundKeyHandler;
   _markers = [];
   constructor(e) {
@@ -5213,7 +5214,7 @@ var xO = class {
         <div class="segment-label">Segments</div>
         <div class="segment-list"></div>
       </div>
-    `, this._resultValueEl = a.querySelector(".result-value"), this._resultUnitEl = a.querySelector(".result-unit"), this._segmentListEl = a.querySelector(".segment-list"), n.appendChild(a), this._instructionsEl = document.createElement("div"), this._instructionsEl.className = "measure-instructions", this._instructionsEl.textContent = "Click Start, then click the map to add points. Double-click to finish.", n.appendChild(this._instructionsEl), this._measurementsListEl = document.createElement("div"), this._measurementsListEl.className = "measurements-list", this._measurementsListEl.style.display = "none", n.appendChild(this._measurementsListEl);
+    `, this._resultValueEl = a.querySelector(".result-value"), this._resultUnitEl = a.querySelector(".result-unit"), this._segmentListEl = a.querySelector(".segment-list"), n.appendChild(a), this._instructionsEl = document.createElement("div"), this._instructionsEl.className = "measure-instructions", this._instructionsEl.textContent = "Click the map to add points. Double-click or right-click to finish.", n.appendChild(this._instructionsEl), this._measurementsListEl = document.createElement("div"), this._measurementsListEl.className = "measurements-list", this._measurementsListEl.style.display = "none", n.appendChild(this._measurementsListEl);
     const o = document.createElement("div");
     return o.className = "measure-actions", o.innerHTML = `
       <button type="button" class="action-btn primary start-btn">
@@ -5249,20 +5250,20 @@ var xO = class {
     this._state.collapsed ? this.expand() : this.collapse();
   }
   _showPanel() {
-    !this._panel && this._container && (this._panel = this._createPanel(), this._container.appendChild(this._panel)), this._button?.classList.add("active");
+    !this._panel && this._container && (this._panel = this._createPanel(), this._container.appendChild(this._panel)), this._button?.classList.add("active"), this._state.isDrawing || this._startDrawing();
   }
   _hidePanel() {
     this._stopDrawing(), this._panel?.remove(), this._panel = void 0, this._button?.classList.remove("active");
   }
   _setMode(e) {
-    if (e === this._state.mode) return;
-    this._stopDrawing(), this._state.mode = e, this._panel?.querySelectorAll(".mode-btn").forEach((i) => {
-      i.classList.toggle("active", i.dataset.mode === e);
+    const t = e !== this._state.mode;
+    this._state.mode = e, this._panel?.querySelectorAll(".mode-btn").forEach((s) => {
+      s.classList.toggle("active", s.dataset.mode === e);
     });
-    const t = this._panel?.querySelector(".measure-unit select");
-    t && this._updateUnitOptions(t);
-    const n = this._panel?.querySelector(".result-label");
-    n && (n.textContent = e === "distance" ? "Total Distance" : "Total Area"), this._emit("modechange");
+    const n = this._panel?.querySelector(".measure-unit select");
+    n && this._updateUnitOptions(n);
+    const i = this._panel?.querySelector(".result-label");
+    i && (i.textContent = e === "distance" ? "Total Distance" : "Total Area"), t && this._emit("modechange"), this._panel && (this._state.isDrawing ? (this._updateMeasurement(), this._updateMapGeometry()) : this._startDrawing());
   }
   _setupMapSources() {
     this._map && (this._map.addSource(this._sourceId, {
@@ -5300,15 +5301,17 @@ var xO = class {
     const e = this._panel?.querySelector(".start-btn span");
     e && (e.textContent = "Finish");
     const t = this._panel?.querySelector(".measure-result");
-    t && (t.style.display = "block"), this._instructionsEl && (this._instructionsEl.textContent = this._state.mode === "distance" ? "Click to add points. Double-click or press Enter to finish." : "Click to add vertices. Double-click or press Enter to close the polygon."), this._boundClickHandler = (n) => this._handleClick(n), this._boundMoveHandler = (n) => this._handleMouseMove(n), this._boundDblClickHandler = (n) => {
+    t && (t.style.display = "block"), this._updateResult(), this._instructionsEl && (this._instructionsEl.textContent = this._state.mode === "distance" ? "Click to add points. Double-click, right-click, or Enter to finish." : "Click to add vertices. Double-click, right-click, or Enter to close the polygon."), this._boundClickHandler = (n) => this._handleClick(n), this._boundMoveHandler = (n) => this._handleMouseMove(n), this._boundDblClickHandler = (n) => {
+      n.preventDefault(), this._finishOnDoubleClick();
+    }, this._boundContextMenuHandler = (n) => {
       n.preventDefault(), this._finishDrawing();
     }, this._boundKeyHandler = (n) => {
       n.key === "Enter" ? this._finishDrawing() : n.key === "Escape" && this._cancelDrawing();
-    }, this._map.on("click", this._boundClickHandler), this._map.on("mousemove", this._boundMoveHandler), this._map.on("dblclick", this._boundDblClickHandler), document.addEventListener("keydown", this._boundKeyHandler), this._map.getCanvas().style.cursor = "crosshair", this._emit("drawstart");
+    }, this._map.on("click", this._boundClickHandler), this._map.on("mousemove", this._boundMoveHandler), this._map.on("dblclick", this._boundDblClickHandler), this._map.on("contextmenu", this._boundContextMenuHandler), document.addEventListener("keydown", this._boundKeyHandler), this._map.getCanvas().style.cursor = "crosshair", this._emit("drawstart");
   }
   _stopDrawing() {
     if (!this._map) return;
-    this._boundClickHandler && this._map.off("click", this._boundClickHandler), this._boundMoveHandler && this._map.off("mousemove", this._boundMoveHandler), this._boundDblClickHandler && this._map.off("dblclick", this._boundDblClickHandler), this._boundKeyHandler && document.removeEventListener("keydown", this._boundKeyHandler), this._map.getCanvas().style.cursor = "", this._state.isDrawing = !1;
+    this._boundClickHandler && this._map.off("click", this._boundClickHandler), this._boundMoveHandler && this._map.off("mousemove", this._boundMoveHandler), this._boundDblClickHandler && this._map.off("dblclick", this._boundDblClickHandler), this._boundContextMenuHandler && this._map.off("contextmenu", this._boundContextMenuHandler), this._boundKeyHandler && document.removeEventListener("keydown", this._boundKeyHandler), this._map.getCanvas().style.cursor = "", this._state.isDrawing = !1;
     const e = this._panel?.querySelector(".start-btn span");
     e && (e.textContent = "Start");
   }
@@ -5328,28 +5331,30 @@ var xO = class {
     this._updateMapGeometry(t);
   }
   _finishDrawing() {
-    if (this._state.currentPoints.length < 2) {
-      this._cancelDrawing();
-      return;
-    }
-    if (this._state.mode === "area" && this._state.currentPoints.length < 3) {
-      this._cancelDrawing();
-      return;
-    }
-    const e = {
+    const e = this._state.mode === "area" ? 3 : 2;
+    if (this._state.currentPoints.length < e) return;
+    const t = {
       id: Ro("measurement"),
       mode: this._state.mode,
       points: [...this._state.currentPoints],
       segments: [...this._state.currentSegments]
     };
-    this._state.mode === "distance" ? e.distance = this._state.currentValue : e.area = this._state.currentValue, this._state.measurements.push(e), this._stopDrawing(), this._updateMapGeometry(), this._updateMeasurementsList();
-    const t = this._panel?.querySelector(".clear-btn");
-    t && (t.disabled = !1), this._emit("drawend", { measurement: e }), this._emit("measurementadd", { measurement: e });
+    this._state.mode === "distance" ? t.distance = this._state.currentValue : t.area = this._state.currentValue, this._state.measurements.push(t), this._stopDrawing(), this._updateMapGeometry(), this._updateMeasurementsList();
+    const n = this._panel?.querySelector(".clear-btn");
+    n && (n.disabled = !1), this._emit("drawend", { measurement: t }), this._emit("measurementadd", { measurement: t }), this._panel && this._startDrawing();
+  }
+  _finishOnDoubleClick() {
+    const e = this._state.currentPoints;
+    if (this._map && e.length >= 2) {
+      const t = e[e.length - 1], n = e[e.length - 2], i = this._map.project([t.lng, t.lat]), s = this._map.project([n.lng, n.lat]);
+      Math.hypot(i.x - s.x, i.y - s.y) < 6 && (e.pop(), this._updateMeasurement());
+    }
+    this._finishDrawing();
   }
   _cancelDrawing() {
     this._stopDrawing(), this._clearMarkers(), this._state.currentPoints = [], this._state.currentValue = 0, this._state.currentSegments = [], this._updateMapGeometry();
     const e = this._panel?.querySelector(".measure-result");
-    e && (e.style.display = "none"), this._instructionsEl && (this._instructionsEl.textContent = "Click Start, then click the map to add points. Double-click to finish.");
+    e && (e.style.display = "none"), this._instructionsEl && (this._instructionsEl.textContent = "Click the map to add points. Double-click or right-click to finish.");
   }
   _updateMeasurement() {
     const e = this._state.currentPoints;