leaflet-polydraw 0.8.7 → 0.8.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -3
- package/dist/polydraw.es.js +630 -366
- package/dist/polydraw.es.js.map +1 -1
- package/dist/polydraw.umd.min.js +1 -1
- package/dist/polydraw.umd.min.js.map +1 -1
- package/dist/types/buttons.d.ts.map +1 -1
- package/dist/types/managers/polygon-draw-manager.d.ts.map +1 -1
- package/dist/types/managers/polygon-interaction-manager.d.ts +2 -0
- package/dist/types/managers/polygon-interaction-manager.d.ts.map +1 -1
- package/dist/types/polydraw.d.ts +3 -0
- package/dist/types/polydraw.d.ts.map +1 -1
- package/dist/types/utils.d.ts +1 -0
- package/dist/types/utils.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/polydraw.es.js
CHANGED
|
@@ -16594,17 +16594,263 @@ class TurfHelper {
|
|
|
16594
16594
|
}
|
|
16595
16595
|
}
|
|
16596
16596
|
}
|
|
16597
|
+
const isTouchDevice = () => "ontouchstart" in window || navigator.maxTouchPoints > 0;
|
|
16598
|
+
class PolyDrawUtil {
|
|
16599
|
+
/**
|
|
16600
|
+
* Gets the bounds of the polygon with optional padding.
|
|
16601
|
+
* @param polygon Array of LatLng points.
|
|
16602
|
+
* @param padding Padding factor.
|
|
16603
|
+
* @returns The LatLngBounds.
|
|
16604
|
+
*/
|
|
16605
|
+
static getBounds(polygon2, padding = 0) {
|
|
16606
|
+
const tmpLatLng = [];
|
|
16607
|
+
polygon2.forEach((ll) => {
|
|
16608
|
+
if (isNaN(ll.lat) || isNaN(ll.lng)) ;
|
|
16609
|
+
tmpLatLng.push(ll);
|
|
16610
|
+
});
|
|
16611
|
+
const polyLine = new L.Polyline(tmpLatLng);
|
|
16612
|
+
const bounds = polyLine.getBounds();
|
|
16613
|
+
if (padding !== 0) {
|
|
16614
|
+
return bounds.pad(padding);
|
|
16615
|
+
}
|
|
16616
|
+
return bounds;
|
|
16617
|
+
}
|
|
16618
|
+
}
|
|
16619
|
+
class Compass {
|
|
16620
|
+
constructor(minLat = 0, minLng = 0, maxLat = 0, maxLng = 0) {
|
|
16621
|
+
__publicField(this, "direction", {
|
|
16622
|
+
East: new L.LatLng(0, 0),
|
|
16623
|
+
North: new L.LatLng(0, 0),
|
|
16624
|
+
NorthEast: new L.LatLng(0, 0),
|
|
16625
|
+
NorthWest: new L.LatLng(0, 0),
|
|
16626
|
+
South: new L.LatLng(0, 0),
|
|
16627
|
+
SouthEast: new L.LatLng(0, 0),
|
|
16628
|
+
SouthWest: new L.LatLng(0, 0),
|
|
16629
|
+
West: new L.LatLng(0, 0)
|
|
16630
|
+
});
|
|
16631
|
+
this.direction.North = new L.LatLng(maxLat, (minLng + maxLng) / 2);
|
|
16632
|
+
this.direction.NorthEast = new L.LatLng(maxLat, maxLng);
|
|
16633
|
+
this.direction.East = new L.LatLng((minLat + maxLat) / 2, maxLng);
|
|
16634
|
+
this.direction.SouthEast = new L.LatLng(minLat, maxLng);
|
|
16635
|
+
this.direction.South = new L.LatLng(minLat, (minLng + maxLng) / 2);
|
|
16636
|
+
this.direction.SouthWest = new L.LatLng(minLat, minLng);
|
|
16637
|
+
this.direction.West = new L.LatLng((minLat + maxLat) / 2, minLng);
|
|
16638
|
+
this.direction.NorthWest = new L.LatLng(maxLat, minLng);
|
|
16639
|
+
}
|
|
16640
|
+
getDirection(direction) {
|
|
16641
|
+
switch (direction) {
|
|
16642
|
+
case MarkerPosition.SouthWest:
|
|
16643
|
+
return this.direction.SouthWest;
|
|
16644
|
+
case MarkerPosition.West:
|
|
16645
|
+
return this.direction.West;
|
|
16646
|
+
case MarkerPosition.NorthWest:
|
|
16647
|
+
return this.direction.NorthWest;
|
|
16648
|
+
case MarkerPosition.North:
|
|
16649
|
+
return this.direction.North;
|
|
16650
|
+
case MarkerPosition.NorthEast:
|
|
16651
|
+
return this.direction.NorthEast;
|
|
16652
|
+
case MarkerPosition.East:
|
|
16653
|
+
return this.direction.East;
|
|
16654
|
+
case MarkerPosition.SouthEast:
|
|
16655
|
+
return this.direction.SouthEast;
|
|
16656
|
+
case MarkerPosition.South:
|
|
16657
|
+
return this.direction.South;
|
|
16658
|
+
default:
|
|
16659
|
+
throw new Error();
|
|
16660
|
+
}
|
|
16661
|
+
}
|
|
16662
|
+
getPositions(startPosition = MarkerPosition.SouthWest, clockwise = false, addClosingNode = true) {
|
|
16663
|
+
const positions = [];
|
|
16664
|
+
const posArray = this.getPositionAsArray(startPosition, clockwise);
|
|
16665
|
+
posArray.forEach((v) => {
|
|
16666
|
+
positions.push([v.lng, v.lat]);
|
|
16667
|
+
});
|
|
16668
|
+
if (addClosingNode) {
|
|
16669
|
+
positions.push([posArray[0].lng, posArray[0].lat]);
|
|
16670
|
+
}
|
|
16671
|
+
return positions;
|
|
16672
|
+
}
|
|
16673
|
+
getPositionAsArray(startPosition = MarkerPosition.NorthEast, clockwise = false) {
|
|
16674
|
+
const positions = [];
|
|
16675
|
+
if (clockwise) {
|
|
16676
|
+
positions.push(this.direction.SouthWest);
|
|
16677
|
+
positions.push(this.direction.West);
|
|
16678
|
+
positions.push(this.direction.NorthWest);
|
|
16679
|
+
positions.push(this.direction.North);
|
|
16680
|
+
positions.push(this.direction.NorthEast);
|
|
16681
|
+
positions.push(this.direction.East);
|
|
16682
|
+
positions.push(this.direction.SouthEast);
|
|
16683
|
+
positions.push(this.direction.South);
|
|
16684
|
+
} else {
|
|
16685
|
+
positions.push(this.direction.SouthWest);
|
|
16686
|
+
positions.push(this.direction.South);
|
|
16687
|
+
positions.push(this.direction.SouthEast);
|
|
16688
|
+
positions.push(this.direction.East);
|
|
16689
|
+
positions.push(this.direction.NorthEast);
|
|
16690
|
+
positions.push(this.direction.North);
|
|
16691
|
+
positions.push(this.direction.NorthWest);
|
|
16692
|
+
positions.push(this.direction.West);
|
|
16693
|
+
}
|
|
16694
|
+
if (startPosition !== MarkerPosition.SouthWest) {
|
|
16695
|
+
const chunk = positions.splice(0, startPosition);
|
|
16696
|
+
chunk.forEach((v, i) => {
|
|
16697
|
+
positions.splice(startPosition + i, 0, v);
|
|
16698
|
+
});
|
|
16699
|
+
}
|
|
16700
|
+
return positions;
|
|
16701
|
+
}
|
|
16702
|
+
}
|
|
16703
|
+
class Perimeter {
|
|
16704
|
+
constructor(length2, config) {
|
|
16705
|
+
__publicField(this, "metricLength", "");
|
|
16706
|
+
__publicField(this, "metricUnit", "");
|
|
16707
|
+
__publicField(this, "imperialLength", "");
|
|
16708
|
+
__publicField(this, "imperialUnit", "");
|
|
16709
|
+
if (length2 !== null || length2 !== void 0) {
|
|
16710
|
+
if (length2 === 0) {
|
|
16711
|
+
if (config.markers.markerInfoIcon.usePerimeterMinValue) {
|
|
16712
|
+
this.metricLength = config.markers.markerInfoIcon.values.min.metric;
|
|
16713
|
+
this.metricUnit = config.markers.markerInfoIcon.units.metric.perimeter.m;
|
|
16714
|
+
this.imperialLength = config.markers.markerInfoIcon.values.min.imperial;
|
|
16715
|
+
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.perimeter.feet;
|
|
16716
|
+
} else {
|
|
16717
|
+
this.metricLength = config.markers.markerInfoIcon.values.unknown.metric;
|
|
16718
|
+
this.metricUnit = config.markers.markerInfoIcon.units.unknownUnit;
|
|
16719
|
+
this.imperialLength = config.markers.markerInfoIcon.values.unknown.imperial;
|
|
16720
|
+
this.imperialUnit = config.markers.markerInfoIcon.units.unknownUnit;
|
|
16721
|
+
}
|
|
16722
|
+
} else if (length2 < 100) {
|
|
16723
|
+
this.metricLength = (Math.ceil(length2 / 10) * 10).toString();
|
|
16724
|
+
this.metricUnit = config.markers.markerInfoIcon.units.metric.perimeter.m;
|
|
16725
|
+
} else if (length2 < 500) {
|
|
16726
|
+
this.metricLength = (Math.ceil(length2 / 50) * 50).toString();
|
|
16727
|
+
this.metricUnit = config.markers.markerInfoIcon.units.metric.perimeter.m;
|
|
16728
|
+
} else if (length2 < 1e3) {
|
|
16729
|
+
this.metricLength = (Math.ceil(length2 / 100) * 100).toString();
|
|
16730
|
+
this.metricUnit = config.markers.markerInfoIcon.units.metric.perimeter.m;
|
|
16731
|
+
} else if (length2 < 1e4) {
|
|
16732
|
+
this.metricLength = (Math.ceil(length2 / 100) * 100 / 1e3).toFixed(1);
|
|
16733
|
+
this.metricUnit = config.markers.markerInfoIcon.units.metric.perimeter.km;
|
|
16734
|
+
} else {
|
|
16735
|
+
this.metricLength = (Math.ceil(length2 / 1e3) * 1e3 / 1e3).toString();
|
|
16736
|
+
this.metricUnit = config.markers.markerInfoIcon.units.metric.perimeter.km;
|
|
16737
|
+
}
|
|
16738
|
+
const inch = length2 / 0.0254;
|
|
16739
|
+
const feet = inch / 12;
|
|
16740
|
+
const yards = feet / 3;
|
|
16741
|
+
const miles = yards / 1760;
|
|
16742
|
+
if (length2 < 1e3 / 2.54) {
|
|
16743
|
+
this.imperialLength = (Math.ceil(feet / 10) * 10).toString();
|
|
16744
|
+
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.perimeter.feet;
|
|
16745
|
+
} else if (length2 < 1e3 / 2.54 * 3) {
|
|
16746
|
+
this.imperialLength = (Math.ceil(yards / 10) * 10).toString();
|
|
16747
|
+
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.perimeter.yards;
|
|
16748
|
+
} else if (length2 < 1609) {
|
|
16749
|
+
this.imperialLength = miles.toFixed(2);
|
|
16750
|
+
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.perimeter.miles;
|
|
16751
|
+
} else if (length2 < 16093) {
|
|
16752
|
+
this.imperialLength = miles.toFixed(1);
|
|
16753
|
+
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.perimeter.miles;
|
|
16754
|
+
} else {
|
|
16755
|
+
this.imperialLength = miles.toFixed(0);
|
|
16756
|
+
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.perimeter.miles;
|
|
16757
|
+
}
|
|
16758
|
+
}
|
|
16759
|
+
}
|
|
16760
|
+
}
|
|
16761
|
+
class Area {
|
|
16762
|
+
constructor(sqrMeterArea, config) {
|
|
16763
|
+
__publicField(this, "metricArea", "");
|
|
16764
|
+
__publicField(this, "metricUnit", "");
|
|
16765
|
+
__publicField(this, "imperialArea", "");
|
|
16766
|
+
__publicField(this, "imperialUnit", "");
|
|
16767
|
+
const area2 = sqrMeterArea;
|
|
16768
|
+
const onlyMetrics = config.markers.markerInfoIcon.units.metric.onlyMetrics;
|
|
16769
|
+
if (area2 !== null || area2 !== void 0) {
|
|
16770
|
+
if (area2 === 0) {
|
|
16771
|
+
this.metricArea = "-";
|
|
16772
|
+
this.metricUnit = config.markers.markerInfoIcon.units.unknownUnit;
|
|
16773
|
+
this.imperialArea = "-";
|
|
16774
|
+
this.imperialUnit = config.markers.markerInfoIcon.units.unknownUnit;
|
|
16775
|
+
} else if (area2 < 1e4) {
|
|
16776
|
+
this.metricArea = Math.round(area2).toString();
|
|
16777
|
+
this.metricUnit = config.markers.markerInfoIcon.units.metric.area.m2;
|
|
16778
|
+
} else if (area2 < 1e5) {
|
|
16779
|
+
if (onlyMetrics) {
|
|
16780
|
+
this.metricArea = (area2 / 1e6).toFixed(2);
|
|
16781
|
+
this.metricUnit = config.markers.markerInfoIcon.units.metric.area.km2;
|
|
16782
|
+
} else {
|
|
16783
|
+
this.metricArea = (area2 / 1e3).toFixed(1);
|
|
16784
|
+
this.metricUnit = config.markers.markerInfoIcon.units.metric.area.daa;
|
|
16785
|
+
}
|
|
16786
|
+
} else if (area2 < 1e7) {
|
|
16787
|
+
if (onlyMetrics) {
|
|
16788
|
+
this.metricArea = (area2 / 1e6).toFixed(2);
|
|
16789
|
+
this.metricUnit = config.markers.markerInfoIcon.units.metric.area.km2;
|
|
16790
|
+
} else {
|
|
16791
|
+
this.metricArea = Math.round(area2 / 1e3).toString();
|
|
16792
|
+
this.metricUnit = config.markers.markerInfoIcon.units.metric.area.daa;
|
|
16793
|
+
}
|
|
16794
|
+
} else if (area2 < 1e8) {
|
|
16795
|
+
if (onlyMetrics) {
|
|
16796
|
+
this.metricArea = (area2 / 1e6).toFixed(1);
|
|
16797
|
+
this.metricUnit = config.markers.markerInfoIcon.units.metric.area.km2;
|
|
16798
|
+
} else {
|
|
16799
|
+
this.metricArea = Math.round(area2 / 1e4).toString();
|
|
16800
|
+
this.metricUnit = config.markers.markerInfoIcon.units.metric.area.ha;
|
|
16801
|
+
}
|
|
16802
|
+
} else {
|
|
16803
|
+
this.metricArea = Math.round(area2 / 1e6).toString();
|
|
16804
|
+
this.metricUnit = config.markers.markerInfoIcon.units.metric.area.km2;
|
|
16805
|
+
}
|
|
16806
|
+
const inch2 = area2 * 1550;
|
|
16807
|
+
const feet2 = inch2 * 69444e-7;
|
|
16808
|
+
const yards2 = feet2 * 0.11111;
|
|
16809
|
+
const acres = yards2 * 20661e-8;
|
|
16810
|
+
const miles2 = yards2 * 32283e-11;
|
|
16811
|
+
if (area2 < 92.9) {
|
|
16812
|
+
this.imperialArea = Math.round(feet2).toString();
|
|
16813
|
+
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.area.feet2;
|
|
16814
|
+
} else if (area2 < 836.14) {
|
|
16815
|
+
this.imperialArea = yards2.toFixed(0);
|
|
16816
|
+
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.area.yards2;
|
|
16817
|
+
} else if (area2 < 40469.6) {
|
|
16818
|
+
this.imperialArea = acres.toFixed(2);
|
|
16819
|
+
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.area.acres;
|
|
16820
|
+
} else if (area2 < 404696) {
|
|
16821
|
+
this.imperialArea = acres.toFixed(1);
|
|
16822
|
+
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.area.acres;
|
|
16823
|
+
} else if (area2 < 4046960) {
|
|
16824
|
+
this.imperialArea = acres.toFixed(0);
|
|
16825
|
+
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.area.acres;
|
|
16826
|
+
} else if (area2 < 25900404) {
|
|
16827
|
+
this.imperialArea = miles2.toFixed(2);
|
|
16828
|
+
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.area.miles2;
|
|
16829
|
+
} else if (area2 < 259004040) {
|
|
16830
|
+
this.imperialArea = miles2.toFixed(1);
|
|
16831
|
+
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.area.miles2;
|
|
16832
|
+
} else {
|
|
16833
|
+
this.imperialArea = miles2.toFixed(0);
|
|
16834
|
+
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.area.miles2;
|
|
16835
|
+
}
|
|
16836
|
+
}
|
|
16837
|
+
}
|
|
16838
|
+
}
|
|
16597
16839
|
function createButtons(container, subContainer, config, onActivateToggle, onDrawClick, onSubtractClick, onEraseClick, onPointToPointClick) {
|
|
16598
16840
|
const activate = L.DomUtil.create("a", "icon-activate", container);
|
|
16599
16841
|
activate.href = "#";
|
|
16600
16842
|
activate.title = "Activate";
|
|
16601
16843
|
activate.innerHTML = '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M5 17V7M5 17C3.89543 17 3 17.8954 3 19C3 20.1046 3.89543 21 5 21C6.10457 21 7 20.1046 7 19M5 17C6.10457 17 7 17.8954 7 19M5 7C6.10457 7 7 6.10457 7 5M5 7C3.89543 7 3 6.10457 3 5C3 3.89543 3.89543 3 5 3C6.10457 3 7 3.89543 7 5M7 5H17M17 5C17 6.10457 17.8954 7 19 7C20.1046 7 21 6.10457 21 5C21 3.89543 20.1046 3 19 3C17.8954 3 17 3.89543 17 5ZM7 19H17M17 19C17 20.1046 17.8954 21 19 21C20.1046 21 21 20.1046 21 19C21 17.8954 20.1046 17 19 17C17.8954 17 17 17.8954 17 19ZM17.9247 6.6737L15.1955 10.3776M15.1955 13.6223L17.9222 17.3223M16 12C16 13.1046 15.1046 14 14 14C12.8954 14 12 13.1046 12 12C12 10.8954 12.8954 10 14 10C15.1046 10 16 10.8954 16 12Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>';
|
|
16844
|
+
L.DomEvent.on(activate, "mousedown", L.DomEvent.stopPropagation);
|
|
16845
|
+
L.DomEvent.on(activate, "touchstart", L.DomEvent.stopPropagation);
|
|
16602
16846
|
L.DomEvent.on(activate, "click", L.DomEvent.stop).on(activate, "click", onActivateToggle);
|
|
16603
16847
|
if (config.modes.draw) {
|
|
16604
16848
|
const draw = L.DomUtil.create("a", "icon-draw", subContainer);
|
|
16605
16849
|
draw.href = "#";
|
|
16606
16850
|
draw.title = "Draw";
|
|
16607
16851
|
draw.innerHTML = '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M15 7.49996L17.5 9.99996M7.5 20L19.25 8.24996C19.9404 7.5596 19.9404 6.44032 19.25 5.74996V5.74996C18.5596 5.0596 17.4404 5.05961 16.75 5.74996L5 17.5V20H7.5ZM7.5 20H15.8787C17.0503 20 18 19.0502 18 17.8786V17.8786C18 17.316 17.7765 16.7765 17.3787 16.3786L17 16M4.5 4.99996C6.5 2.99996 10 3.99996 10 5.99996C10 8.5 4 8.5 4 11C4 11.8759 4.53314 12.5256 5.22583 13" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>';
|
|
16852
|
+
L.DomEvent.on(draw, "mousedown", L.DomEvent.stopPropagation);
|
|
16853
|
+
L.DomEvent.on(draw, "touchstart", L.DomEvent.stopPropagation);
|
|
16608
16854
|
L.DomEvent.on(draw, "click", L.DomEvent.stop).on(draw, "click", onDrawClick);
|
|
16609
16855
|
}
|
|
16610
16856
|
if (config.modes.subtract) {
|
|
@@ -16612,13 +16858,17 @@ function createButtons(container, subContainer, config, onActivateToggle, onDraw
|
|
|
16612
16858
|
subtract.href = "#";
|
|
16613
16859
|
subtract.title = "Subtract";
|
|
16614
16860
|
subtract.innerHTML = '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M15.0722 3.9967L20.7508 9.83395L17.0544 13.5304L13.0758 17.5H21.0041V19H7.93503L4.00195 15.0669L15.0722 3.9967ZM10.952 17.5L15.4628 12.9994L11.8268 9.3634L6.12327 15.0669L8.55635 17.5H10.952Z" fill="#1F2328"></path> </g></svg>';
|
|
16861
|
+
L.DomEvent.on(subtract, "mousedown", L.DomEvent.stopPropagation);
|
|
16862
|
+
L.DomEvent.on(subtract, "touchstart", L.DomEvent.stopPropagation);
|
|
16615
16863
|
L.DomEvent.on(subtract, "click", L.DomEvent.stop).on(subtract, "click", onSubtractClick);
|
|
16616
16864
|
}
|
|
16617
|
-
if (config.modes.p2p) {
|
|
16865
|
+
if (config.modes.p2p && !isTouchDevice()) {
|
|
16618
16866
|
const p2p = L.DomUtil.create("a", "icon-p2p", subContainer);
|
|
16619
16867
|
p2p.href = "#";
|
|
16620
16868
|
p2p.title = "Point to Point";
|
|
16621
16869
|
p2p.innerHTML = '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M5 17V7M5 17C3.89543 17 3 17.8954 3 19C3 20.1046 3.89543 21 5 21C6.10457 21 7 20.1046 7 19M5 17C6.10457 17 7 17.8954 7 19M5 7C6.10457 7 7 6.10457 7 5M5 7C3.89543 7 3 6.10457 3 5C3 3.89543 3.89543 3 5 3C6.10457 3 7 3.89543 7 5M7 5H17M17 5C17 6.10457 17.8954 7 19 7C20.1046 7 21 6.10457 21 5C21 3.89543 20.1046 3 19 3C17.8954 3 17 3.89543 17 5ZM7 19H17M17 19C17 20.1046 17.8954 21 19 21C20.1046 21 21 20.1046 21 19C21 17.8954 20.1046 17 19 17C17.8954 17 17 17.8954 17 19ZM17.9247 6.6737L15.1955 10.3776M15.1955 13.6223L17.9222 17.3223M16 12C16 13.1046 15.1046 14 14 14C12.8954 14 12 13.1046 12 12C12 10.8954 12.8954 10 14 10C15.1046 10 16 10.8954 16 12Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>';
|
|
16870
|
+
L.DomEvent.on(p2p, "mousedown", L.DomEvent.stopPropagation);
|
|
16871
|
+
L.DomEvent.on(p2p, "touchstart", L.DomEvent.stopPropagation);
|
|
16622
16872
|
L.DomEvent.on(p2p, "click", L.DomEvent.stop).on(p2p, "click", onPointToPointClick);
|
|
16623
16873
|
}
|
|
16624
16874
|
if (config.modes.deleteAll) {
|
|
@@ -16641,6 +16891,8 @@ function createButtons(container, subContainer, config, onActivateToggle, onDraw
|
|
|
16641
16891
|
c0-0.7,0.6-1.3,1.3-1.3c0.7,0,1.3,0.6,1.3,1.3V33.8z M30.3,34.2c0,0.5-0.4,1-1,1c-0.5,0-1-0.4-1-1V22.6c0-0.5,0.4-1,1-1
|
|
16642
16892
|
c0.5,0,1,0.4,1,1V34.2z"/>
|
|
16643
16893
|
</svg>`;
|
|
16894
|
+
L.DomEvent.on(erase, "mousedown", L.DomEvent.stopPropagation);
|
|
16895
|
+
L.DomEvent.on(erase, "touchstart", L.DomEvent.stopPropagation);
|
|
16644
16896
|
L.DomEvent.on(erase, "click", L.DomEvent.stop).on(erase, "click", onEraseClick);
|
|
16645
16897
|
}
|
|
16646
16898
|
}
|
|
@@ -17154,6 +17406,7 @@ class PolygonDrawManager {
|
|
|
17154
17406
|
// Point-to-Point drawing state
|
|
17155
17407
|
__publicField(this, "p2pMarkers", []);
|
|
17156
17408
|
__publicField(this, "isModifierKeyHeld", false);
|
|
17409
|
+
console.log("PolygonDrawManager constructor");
|
|
17157
17410
|
this.turfHelper = dependencies.turfHelper;
|
|
17158
17411
|
this.map = dependencies.map;
|
|
17159
17412
|
this.config = dependencies.config;
|
|
@@ -17164,6 +17417,7 @@ class PolygonDrawManager {
|
|
|
17164
17417
|
* Add event listener
|
|
17165
17418
|
*/
|
|
17166
17419
|
on(event, callback) {
|
|
17420
|
+
console.log("PolygonDrawManager on");
|
|
17167
17421
|
if (!this.eventListeners.has(event)) {
|
|
17168
17422
|
this.eventListeners.set(event, []);
|
|
17169
17423
|
}
|
|
@@ -17173,6 +17427,7 @@ class PolygonDrawManager {
|
|
|
17173
17427
|
* Emit event to all listeners
|
|
17174
17428
|
*/
|
|
17175
17429
|
emit(event, data) {
|
|
17430
|
+
console.log("PolygonDrawManager emit");
|
|
17176
17431
|
const listeners = this.eventListeners.get(event);
|
|
17177
17432
|
if (listeners) {
|
|
17178
17433
|
listeners.forEach((callback) => callback(data));
|
|
@@ -17182,6 +17437,7 @@ class PolygonDrawManager {
|
|
|
17182
17437
|
* Handle mouse move during freehand drawing
|
|
17183
17438
|
*/
|
|
17184
17439
|
mouseMove(event) {
|
|
17440
|
+
console.log("mouseMove");
|
|
17185
17441
|
if ("latlng" in event && event.latlng) {
|
|
17186
17442
|
this.tracer.addLatLng(event.latlng);
|
|
17187
17443
|
} else if ("touches" in event && event.touches && event.touches.length > 0) {
|
|
@@ -17196,6 +17452,7 @@ class PolygonDrawManager {
|
|
|
17196
17452
|
* Handle mouse up/leave to complete freehand drawing
|
|
17197
17453
|
*/
|
|
17198
17454
|
async mouseUpLeave(event) {
|
|
17455
|
+
console.log("mouseUpLeave");
|
|
17199
17456
|
const tracerGeoJSON = this.tracer.toGeoJSON();
|
|
17200
17457
|
if (!tracerGeoJSON || !tracerGeoJSON.geometry || !tracerGeoJSON.geometry.coordinates || tracerGeoJSON.geometry.coordinates.length < 3) {
|
|
17201
17458
|
return {
|
|
@@ -17241,6 +17498,7 @@ class PolygonDrawManager {
|
|
|
17241
17498
|
* Handle point-to-point click
|
|
17242
17499
|
*/
|
|
17243
17500
|
handlePointToPointClick(clickLatLng) {
|
|
17501
|
+
console.log("handlePointToPointClick");
|
|
17244
17502
|
if (!clickLatLng) {
|
|
17245
17503
|
return;
|
|
17246
17504
|
}
|
|
@@ -17269,6 +17527,7 @@ class PolygonDrawManager {
|
|
|
17269
17527
|
this.updateP2PTracer();
|
|
17270
17528
|
});
|
|
17271
17529
|
pointMarker.on("click", (e) => {
|
|
17530
|
+
console.log("p2p marker click");
|
|
17272
17531
|
if (this.isModifierKeyHeld && this.config.modes.edgeDeletion) {
|
|
17273
17532
|
this.deleteP2PMarker(pointMarker);
|
|
17274
17533
|
L.DomEvent.stopPropagation(e);
|
|
@@ -17298,6 +17557,7 @@ class PolygonDrawManager {
|
|
|
17298
17557
|
}
|
|
17299
17558
|
});
|
|
17300
17559
|
pointMarker.on("click", (e) => {
|
|
17560
|
+
console.log("p2p first marker click");
|
|
17301
17561
|
if (this.isModifierKeyHeld && this.config.modes.edgeDeletion) {
|
|
17302
17562
|
this.deleteP2PMarker(pointMarker);
|
|
17303
17563
|
L.DomEvent.stopPropagation(e);
|
|
@@ -17318,6 +17578,7 @@ class PolygonDrawManager {
|
|
|
17318
17578
|
* Handle double-click to complete point-to-point polygon
|
|
17319
17579
|
*/
|
|
17320
17580
|
handleDoubleClick(e) {
|
|
17581
|
+
console.log("handleDoubleClick");
|
|
17321
17582
|
if (this.modeManager.getCurrentMode() !== DrawMode.PointToPoint) {
|
|
17322
17583
|
return;
|
|
17323
17584
|
}
|
|
@@ -17329,6 +17590,7 @@ class PolygonDrawManager {
|
|
|
17329
17590
|
* Complete point-to-point polygon drawing
|
|
17330
17591
|
*/
|
|
17331
17592
|
completePointToPointPolygon() {
|
|
17593
|
+
console.log("PolygonDrawManager completePointToPointPolygon");
|
|
17332
17594
|
const points = this.p2pMarkers.map((marker) => marker.getLatLng());
|
|
17333
17595
|
if (points.length < 3) {
|
|
17334
17596
|
return;
|
|
@@ -17359,6 +17621,7 @@ class PolygonDrawManager {
|
|
|
17359
17621
|
* Cancel point-to-point drawing
|
|
17360
17622
|
*/
|
|
17361
17623
|
cancelPointToPointDrawing() {
|
|
17624
|
+
console.log("PolygonDrawManager cancelPointToPointDrawing");
|
|
17362
17625
|
this.clearP2pMarkers();
|
|
17363
17626
|
this.resetTracer();
|
|
17364
17627
|
this.emit("drawCancelled", { mode: DrawMode.PointToPoint });
|
|
@@ -17367,6 +17630,7 @@ class PolygonDrawManager {
|
|
|
17367
17630
|
* Clear all P2P markers
|
|
17368
17631
|
*/
|
|
17369
17632
|
clearP2pMarkers() {
|
|
17633
|
+
console.log("PolygonDrawManager clearP2pMarkers");
|
|
17370
17634
|
this.p2pMarkers.forEach((marker) => this.map.removeLayer(marker));
|
|
17371
17635
|
this.p2pMarkers = [];
|
|
17372
17636
|
}
|
|
@@ -17374,6 +17638,7 @@ class PolygonDrawManager {
|
|
|
17374
17638
|
* Reset the tracer
|
|
17375
17639
|
*/
|
|
17376
17640
|
resetTracer() {
|
|
17641
|
+
console.log("PolygonDrawManager resetTracer");
|
|
17377
17642
|
this.tracer.setLatLngs([]);
|
|
17378
17643
|
try {
|
|
17379
17644
|
this.tracer.setStyle({
|
|
@@ -17386,6 +17651,7 @@ class PolygonDrawManager {
|
|
|
17386
17651
|
* Check if clicking on the first point to close polygon
|
|
17387
17652
|
*/
|
|
17388
17653
|
isClickingFirstPoint(clickLatLng, firstPoint) {
|
|
17654
|
+
console.log("PolygonDrawManager isClickingFirstPoint");
|
|
17389
17655
|
if (!firstPoint) return false;
|
|
17390
17656
|
const zoom = this.map.getZoom();
|
|
17391
17657
|
const baseTolerance = 5e-4;
|
|
@@ -17436,18 +17702,21 @@ class PolygonDrawManager {
|
|
|
17436
17702
|
* Get current P2P markers (for external access)
|
|
17437
17703
|
*/
|
|
17438
17704
|
getP2pMarkers() {
|
|
17705
|
+
console.log("PolygonDrawManager getP2pMarkers");
|
|
17439
17706
|
return [...this.p2pMarkers];
|
|
17440
17707
|
}
|
|
17441
17708
|
/**
|
|
17442
17709
|
* Check if currently in point-to-point drawing mode
|
|
17443
17710
|
*/
|
|
17444
17711
|
isInPointToPointMode() {
|
|
17712
|
+
console.log("PolygonDrawManager isInPointToPointMode");
|
|
17445
17713
|
return this.modeManager.getCurrentMode() === DrawMode.PointToPoint;
|
|
17446
17714
|
}
|
|
17447
17715
|
/**
|
|
17448
17716
|
* Get current tracer points count
|
|
17449
17717
|
*/
|
|
17450
17718
|
getTracerPointsCount() {
|
|
17719
|
+
console.log("PolygonDrawManager getTracerPointsCount");
|
|
17451
17720
|
const points = this.tracer.getLatLngs();
|
|
17452
17721
|
return points.length;
|
|
17453
17722
|
}
|
|
@@ -17948,344 +18217,105 @@ class PolygonGeometryManager {
|
|
|
17948
18217
|
* Determine if two polygons should create a donut instead of a regular union
|
|
17949
18218
|
*/
|
|
17950
18219
|
shouldCreateDonutPolygon(polygon1, polygon2) {
|
|
17951
|
-
try {
|
|
17952
|
-
return false;
|
|
17953
|
-
} catch (error) {
|
|
17954
|
-
console.warn("Error in shouldCreateDonutPolygon:", error.message);
|
|
17955
|
-
return false;
|
|
17956
|
-
}
|
|
17957
|
-
}
|
|
17958
|
-
/**
|
|
17959
|
-
* Create a donut polygon from two intersecting polygons
|
|
17960
|
-
*/
|
|
17961
|
-
createDonutPolygon(polygon1, polygon2) {
|
|
17962
|
-
try {
|
|
17963
|
-
const area1 = this.turfHelper.getPolygonArea(polygon1);
|
|
17964
|
-
const area2 = this.turfHelper.getPolygonArea(polygon2);
|
|
17965
|
-
let outerPolygon;
|
|
17966
|
-
let innerPolygon;
|
|
17967
|
-
if (area1 > area2) {
|
|
17968
|
-
outerPolygon = polygon1;
|
|
17969
|
-
innerPolygon = polygon2;
|
|
17970
|
-
} else {
|
|
17971
|
-
outerPolygon = polygon2;
|
|
17972
|
-
innerPolygon = polygon1;
|
|
17973
|
-
}
|
|
17974
|
-
const innerWithinOuter = this.turfHelper.isPolygonCompletelyWithin(
|
|
17975
|
-
innerPolygon,
|
|
17976
|
-
outerPolygon
|
|
17977
|
-
);
|
|
17978
|
-
if (innerWithinOuter) {
|
|
17979
|
-
return this.createDonutFromContainment(outerPolygon, innerPolygon);
|
|
17980
|
-
} else {
|
|
17981
|
-
return this.createDonutFromIntersection(outerPolygon, innerPolygon);
|
|
17982
|
-
}
|
|
17983
|
-
} catch (error) {
|
|
17984
|
-
console.warn("Error in createDonutPolygon:", error.message);
|
|
17985
|
-
return null;
|
|
17986
|
-
}
|
|
17987
|
-
}
|
|
17988
|
-
/**
|
|
17989
|
-
* Create donut when one polygon is completely within another
|
|
17990
|
-
*/
|
|
17991
|
-
createDonutFromContainment(outerPolygon, innerPolygon) {
|
|
17992
|
-
try {
|
|
17993
|
-
const outerCoords = this.turfHelper.getCoords(outerPolygon);
|
|
17994
|
-
const innerCoords = this.turfHelper.getCoords(innerPolygon);
|
|
17995
|
-
const donutCoords = [
|
|
17996
|
-
outerCoords[0][0],
|
|
17997
|
-
// Outer ring
|
|
17998
|
-
innerCoords[0][0]
|
|
17999
|
-
// Inner ring as hole
|
|
18000
|
-
];
|
|
18001
|
-
return {
|
|
18002
|
-
type: "Feature",
|
|
18003
|
-
geometry: {
|
|
18004
|
-
type: "Polygon",
|
|
18005
|
-
coordinates: donutCoords
|
|
18006
|
-
},
|
|
18007
|
-
properties: {}
|
|
18008
|
-
};
|
|
18009
|
-
} catch (error) {
|
|
18010
|
-
console.warn("Error in createDonutFromContainment:", error.message);
|
|
18011
|
-
return null;
|
|
18012
|
-
}
|
|
18013
|
-
}
|
|
18014
|
-
/**
|
|
18015
|
-
* Create donut from intersecting polygons (C-to-O scenario)
|
|
18016
|
-
*/
|
|
18017
|
-
createDonutFromIntersection(polygon1, polygon2) {
|
|
18018
|
-
try {
|
|
18019
|
-
const union3 = this.turfHelper.union(polygon1, polygon2);
|
|
18020
|
-
if (!union3) {
|
|
18021
|
-
return null;
|
|
18022
|
-
}
|
|
18023
|
-
const intersection3 = this.turfHelper.getIntersection(polygon1, polygon2);
|
|
18024
|
-
if (!intersection3) {
|
|
18025
|
-
return union3;
|
|
18026
|
-
}
|
|
18027
|
-
const donut = this.turfHelper.polygonDifference(union3, intersection3);
|
|
18028
|
-
return donut;
|
|
18029
|
-
} catch (error) {
|
|
18030
|
-
console.warn("Error in createDonutFromIntersection:", error.message);
|
|
18031
|
-
return null;
|
|
18032
|
-
}
|
|
18033
|
-
}
|
|
18034
|
-
}
|
|
18035
|
-
class IconFactory {
|
|
18036
|
-
/**
|
|
18037
|
-
* Creates a DivIcon with the given class names.
|
|
18038
|
-
* @param classNames Array of class names to apply.
|
|
18039
|
-
* @returns A Leaflet DivIcon.
|
|
18040
|
-
*/
|
|
18041
|
-
static createDivIcon(classNames) {
|
|
18042
|
-
const classes = classNames.join(" ");
|
|
18043
|
-
return L.divIcon({ className: classes });
|
|
18044
|
-
}
|
|
18045
|
-
}
|
|
18046
|
-
class PolyDrawUtil {
|
|
18047
|
-
/**
|
|
18048
|
-
* Gets the bounds of the polygon with optional padding.
|
|
18049
|
-
* @param polygon Array of LatLng points.
|
|
18050
|
-
* @param padding Padding factor.
|
|
18051
|
-
* @returns The LatLngBounds.
|
|
18052
|
-
*/
|
|
18053
|
-
static getBounds(polygon2, padding = 0) {
|
|
18054
|
-
const tmpLatLng = [];
|
|
18055
|
-
polygon2.forEach((ll) => {
|
|
18056
|
-
if (isNaN(ll.lat) || isNaN(ll.lng)) ;
|
|
18057
|
-
tmpLatLng.push(ll);
|
|
18058
|
-
});
|
|
18059
|
-
const polyLine = new L.Polyline(tmpLatLng);
|
|
18060
|
-
const bounds = polyLine.getBounds();
|
|
18061
|
-
if (padding !== 0) {
|
|
18062
|
-
return bounds.pad(padding);
|
|
18063
|
-
}
|
|
18064
|
-
return bounds;
|
|
18065
|
-
}
|
|
18066
|
-
}
|
|
18067
|
-
class Compass {
|
|
18068
|
-
constructor(minLat = 0, minLng = 0, maxLat = 0, maxLng = 0) {
|
|
18069
|
-
__publicField(this, "direction", {
|
|
18070
|
-
East: new L.LatLng(0, 0),
|
|
18071
|
-
North: new L.LatLng(0, 0),
|
|
18072
|
-
NorthEast: new L.LatLng(0, 0),
|
|
18073
|
-
NorthWest: new L.LatLng(0, 0),
|
|
18074
|
-
South: new L.LatLng(0, 0),
|
|
18075
|
-
SouthEast: new L.LatLng(0, 0),
|
|
18076
|
-
SouthWest: new L.LatLng(0, 0),
|
|
18077
|
-
West: new L.LatLng(0, 0)
|
|
18078
|
-
});
|
|
18079
|
-
this.direction.North = new L.LatLng(maxLat, (minLng + maxLng) / 2);
|
|
18080
|
-
this.direction.NorthEast = new L.LatLng(maxLat, maxLng);
|
|
18081
|
-
this.direction.East = new L.LatLng((minLat + maxLat) / 2, maxLng);
|
|
18082
|
-
this.direction.SouthEast = new L.LatLng(minLat, maxLng);
|
|
18083
|
-
this.direction.South = new L.LatLng(minLat, (minLng + maxLng) / 2);
|
|
18084
|
-
this.direction.SouthWest = new L.LatLng(minLat, minLng);
|
|
18085
|
-
this.direction.West = new L.LatLng((minLat + maxLat) / 2, minLng);
|
|
18086
|
-
this.direction.NorthWest = new L.LatLng(maxLat, minLng);
|
|
18087
|
-
}
|
|
18088
|
-
getDirection(direction) {
|
|
18089
|
-
switch (direction) {
|
|
18090
|
-
case MarkerPosition.SouthWest:
|
|
18091
|
-
return this.direction.SouthWest;
|
|
18092
|
-
case MarkerPosition.West:
|
|
18093
|
-
return this.direction.West;
|
|
18094
|
-
case MarkerPosition.NorthWest:
|
|
18095
|
-
return this.direction.NorthWest;
|
|
18096
|
-
case MarkerPosition.North:
|
|
18097
|
-
return this.direction.North;
|
|
18098
|
-
case MarkerPosition.NorthEast:
|
|
18099
|
-
return this.direction.NorthEast;
|
|
18100
|
-
case MarkerPosition.East:
|
|
18101
|
-
return this.direction.East;
|
|
18102
|
-
case MarkerPosition.SouthEast:
|
|
18103
|
-
return this.direction.SouthEast;
|
|
18104
|
-
case MarkerPosition.South:
|
|
18105
|
-
return this.direction.South;
|
|
18106
|
-
default:
|
|
18107
|
-
throw new Error();
|
|
18108
|
-
}
|
|
18109
|
-
}
|
|
18110
|
-
getPositions(startPosition = MarkerPosition.SouthWest, clockwise = false, addClosingNode = true) {
|
|
18111
|
-
const positions = [];
|
|
18112
|
-
const posArray = this.getPositionAsArray(startPosition, clockwise);
|
|
18113
|
-
posArray.forEach((v) => {
|
|
18114
|
-
positions.push([v.lng, v.lat]);
|
|
18115
|
-
});
|
|
18116
|
-
if (addClosingNode) {
|
|
18117
|
-
positions.push([posArray[0].lng, posArray[0].lat]);
|
|
18118
|
-
}
|
|
18119
|
-
return positions;
|
|
18120
|
-
}
|
|
18121
|
-
getPositionAsArray(startPosition = MarkerPosition.NorthEast, clockwise = false) {
|
|
18122
|
-
const positions = [];
|
|
18123
|
-
if (clockwise) {
|
|
18124
|
-
positions.push(this.direction.SouthWest);
|
|
18125
|
-
positions.push(this.direction.West);
|
|
18126
|
-
positions.push(this.direction.NorthWest);
|
|
18127
|
-
positions.push(this.direction.North);
|
|
18128
|
-
positions.push(this.direction.NorthEast);
|
|
18129
|
-
positions.push(this.direction.East);
|
|
18130
|
-
positions.push(this.direction.SouthEast);
|
|
18131
|
-
positions.push(this.direction.South);
|
|
18132
|
-
} else {
|
|
18133
|
-
positions.push(this.direction.SouthWest);
|
|
18134
|
-
positions.push(this.direction.South);
|
|
18135
|
-
positions.push(this.direction.SouthEast);
|
|
18136
|
-
positions.push(this.direction.East);
|
|
18137
|
-
positions.push(this.direction.NorthEast);
|
|
18138
|
-
positions.push(this.direction.North);
|
|
18139
|
-
positions.push(this.direction.NorthWest);
|
|
18140
|
-
positions.push(this.direction.West);
|
|
18141
|
-
}
|
|
18142
|
-
if (startPosition !== MarkerPosition.SouthWest) {
|
|
18143
|
-
const chunk = positions.splice(0, startPosition);
|
|
18144
|
-
chunk.forEach((v, i) => {
|
|
18145
|
-
positions.splice(startPosition + i, 0, v);
|
|
18146
|
-
});
|
|
18147
|
-
}
|
|
18148
|
-
return positions;
|
|
18149
|
-
}
|
|
18150
|
-
}
|
|
18151
|
-
class Perimeter {
|
|
18152
|
-
constructor(length2, config) {
|
|
18153
|
-
__publicField(this, "metricLength", "");
|
|
18154
|
-
__publicField(this, "metricUnit", "");
|
|
18155
|
-
__publicField(this, "imperialLength", "");
|
|
18156
|
-
__publicField(this, "imperialUnit", "");
|
|
18157
|
-
if (length2 !== null || length2 !== void 0) {
|
|
18158
|
-
if (length2 === 0) {
|
|
18159
|
-
if (config.markers.markerInfoIcon.usePerimeterMinValue) {
|
|
18160
|
-
this.metricLength = config.markers.markerInfoIcon.values.min.metric;
|
|
18161
|
-
this.metricUnit = config.markers.markerInfoIcon.units.metric.perimeter.m;
|
|
18162
|
-
this.imperialLength = config.markers.markerInfoIcon.values.min.imperial;
|
|
18163
|
-
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.perimeter.feet;
|
|
18164
|
-
} else {
|
|
18165
|
-
this.metricLength = config.markers.markerInfoIcon.values.unknown.metric;
|
|
18166
|
-
this.metricUnit = config.markers.markerInfoIcon.units.unknownUnit;
|
|
18167
|
-
this.imperialLength = config.markers.markerInfoIcon.values.unknown.imperial;
|
|
18168
|
-
this.imperialUnit = config.markers.markerInfoIcon.units.unknownUnit;
|
|
18169
|
-
}
|
|
18170
|
-
} else if (length2 < 100) {
|
|
18171
|
-
this.metricLength = (Math.ceil(length2 / 10) * 10).toString();
|
|
18172
|
-
this.metricUnit = config.markers.markerInfoIcon.units.metric.perimeter.m;
|
|
18173
|
-
} else if (length2 < 500) {
|
|
18174
|
-
this.metricLength = (Math.ceil(length2 / 50) * 50).toString();
|
|
18175
|
-
this.metricUnit = config.markers.markerInfoIcon.units.metric.perimeter.m;
|
|
18176
|
-
} else if (length2 < 1e3) {
|
|
18177
|
-
this.metricLength = (Math.ceil(length2 / 100) * 100).toString();
|
|
18178
|
-
this.metricUnit = config.markers.markerInfoIcon.units.metric.perimeter.m;
|
|
18179
|
-
} else if (length2 < 1e4) {
|
|
18180
|
-
this.metricLength = (Math.ceil(length2 / 100) * 100 / 1e3).toFixed(1);
|
|
18181
|
-
this.metricUnit = config.markers.markerInfoIcon.units.metric.perimeter.km;
|
|
18220
|
+
try {
|
|
18221
|
+
return false;
|
|
18222
|
+
} catch (error) {
|
|
18223
|
+
console.warn("Error in shouldCreateDonutPolygon:", error.message);
|
|
18224
|
+
return false;
|
|
18225
|
+
}
|
|
18226
|
+
}
|
|
18227
|
+
/**
|
|
18228
|
+
* Create a donut polygon from two intersecting polygons
|
|
18229
|
+
*/
|
|
18230
|
+
createDonutPolygon(polygon1, polygon2) {
|
|
18231
|
+
try {
|
|
18232
|
+
const area1 = this.turfHelper.getPolygonArea(polygon1);
|
|
18233
|
+
const area2 = this.turfHelper.getPolygonArea(polygon2);
|
|
18234
|
+
let outerPolygon;
|
|
18235
|
+
let innerPolygon;
|
|
18236
|
+
if (area1 > area2) {
|
|
18237
|
+
outerPolygon = polygon1;
|
|
18238
|
+
innerPolygon = polygon2;
|
|
18182
18239
|
} else {
|
|
18183
|
-
|
|
18184
|
-
|
|
18240
|
+
outerPolygon = polygon2;
|
|
18241
|
+
innerPolygon = polygon1;
|
|
18185
18242
|
}
|
|
18186
|
-
const
|
|
18187
|
-
|
|
18188
|
-
|
|
18189
|
-
|
|
18190
|
-
if (
|
|
18191
|
-
this.
|
|
18192
|
-
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.perimeter.feet;
|
|
18193
|
-
} else if (length2 < 1e3 / 2.54 * 3) {
|
|
18194
|
-
this.imperialLength = (Math.ceil(yards / 10) * 10).toString();
|
|
18195
|
-
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.perimeter.yards;
|
|
18196
|
-
} else if (length2 < 1609) {
|
|
18197
|
-
this.imperialLength = miles.toFixed(2);
|
|
18198
|
-
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.perimeter.miles;
|
|
18199
|
-
} else if (length2 < 16093) {
|
|
18200
|
-
this.imperialLength = miles.toFixed(1);
|
|
18201
|
-
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.perimeter.miles;
|
|
18243
|
+
const innerWithinOuter = this.turfHelper.isPolygonCompletelyWithin(
|
|
18244
|
+
innerPolygon,
|
|
18245
|
+
outerPolygon
|
|
18246
|
+
);
|
|
18247
|
+
if (innerWithinOuter) {
|
|
18248
|
+
return this.createDonutFromContainment(outerPolygon, innerPolygon);
|
|
18202
18249
|
} else {
|
|
18203
|
-
this.
|
|
18204
|
-
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.perimeter.miles;
|
|
18250
|
+
return this.createDonutFromIntersection(outerPolygon, innerPolygon);
|
|
18205
18251
|
}
|
|
18252
|
+
} catch (error) {
|
|
18253
|
+
console.warn("Error in createDonutPolygon:", error.message);
|
|
18254
|
+
return null;
|
|
18206
18255
|
}
|
|
18207
18256
|
}
|
|
18208
|
-
|
|
18209
|
-
|
|
18210
|
-
|
|
18211
|
-
|
|
18212
|
-
|
|
18213
|
-
|
|
18214
|
-
|
|
18215
|
-
|
|
18216
|
-
|
|
18217
|
-
|
|
18218
|
-
|
|
18219
|
-
|
|
18220
|
-
|
|
18221
|
-
|
|
18222
|
-
|
|
18223
|
-
|
|
18224
|
-
|
|
18225
|
-
|
|
18226
|
-
|
|
18227
|
-
|
|
18228
|
-
|
|
18229
|
-
|
|
18230
|
-
|
|
18231
|
-
|
|
18232
|
-
|
|
18233
|
-
|
|
18234
|
-
|
|
18235
|
-
|
|
18236
|
-
|
|
18237
|
-
|
|
18238
|
-
|
|
18239
|
-
|
|
18240
|
-
|
|
18241
|
-
|
|
18242
|
-
} else if (area2 < 1e8) {
|
|
18243
|
-
if (onlyMetrics) {
|
|
18244
|
-
this.metricArea = (area2 / 1e6).toFixed(1);
|
|
18245
|
-
this.metricUnit = config.markers.markerInfoIcon.units.metric.area.km2;
|
|
18246
|
-
} else {
|
|
18247
|
-
this.metricArea = Math.round(area2 / 1e4).toString();
|
|
18248
|
-
this.metricUnit = config.markers.markerInfoIcon.units.metric.area.ha;
|
|
18249
|
-
}
|
|
18250
|
-
} else {
|
|
18251
|
-
this.metricArea = Math.round(area2 / 1e6).toString();
|
|
18252
|
-
this.metricUnit = config.markers.markerInfoIcon.units.metric.area.km2;
|
|
18257
|
+
/**
|
|
18258
|
+
* Create donut when one polygon is completely within another
|
|
18259
|
+
*/
|
|
18260
|
+
createDonutFromContainment(outerPolygon, innerPolygon) {
|
|
18261
|
+
try {
|
|
18262
|
+
const outerCoords = this.turfHelper.getCoords(outerPolygon);
|
|
18263
|
+
const innerCoords = this.turfHelper.getCoords(innerPolygon);
|
|
18264
|
+
const donutCoords = [
|
|
18265
|
+
outerCoords[0][0],
|
|
18266
|
+
// Outer ring
|
|
18267
|
+
innerCoords[0][0]
|
|
18268
|
+
// Inner ring as hole
|
|
18269
|
+
];
|
|
18270
|
+
return {
|
|
18271
|
+
type: "Feature",
|
|
18272
|
+
geometry: {
|
|
18273
|
+
type: "Polygon",
|
|
18274
|
+
coordinates: donutCoords
|
|
18275
|
+
},
|
|
18276
|
+
properties: {}
|
|
18277
|
+
};
|
|
18278
|
+
} catch (error) {
|
|
18279
|
+
console.warn("Error in createDonutFromContainment:", error.message);
|
|
18280
|
+
return null;
|
|
18281
|
+
}
|
|
18282
|
+
}
|
|
18283
|
+
/**
|
|
18284
|
+
* Create donut from intersecting polygons (C-to-O scenario)
|
|
18285
|
+
*/
|
|
18286
|
+
createDonutFromIntersection(polygon1, polygon2) {
|
|
18287
|
+
try {
|
|
18288
|
+
const union3 = this.turfHelper.union(polygon1, polygon2);
|
|
18289
|
+
if (!union3) {
|
|
18290
|
+
return null;
|
|
18253
18291
|
}
|
|
18254
|
-
const
|
|
18255
|
-
|
|
18256
|
-
|
|
18257
|
-
const acres = yards2 * 20661e-8;
|
|
18258
|
-
const miles2 = yards2 * 32283e-11;
|
|
18259
|
-
if (area2 < 92.9) {
|
|
18260
|
-
this.imperialArea = Math.round(feet2).toString();
|
|
18261
|
-
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.area.feet2;
|
|
18262
|
-
} else if (area2 < 836.14) {
|
|
18263
|
-
this.imperialArea = yards2.toFixed(0);
|
|
18264
|
-
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.area.yards2;
|
|
18265
|
-
} else if (area2 < 40469.6) {
|
|
18266
|
-
this.imperialArea = acres.toFixed(2);
|
|
18267
|
-
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.area.acres;
|
|
18268
|
-
} else if (area2 < 404696) {
|
|
18269
|
-
this.imperialArea = acres.toFixed(1);
|
|
18270
|
-
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.area.acres;
|
|
18271
|
-
} else if (area2 < 4046960) {
|
|
18272
|
-
this.imperialArea = acres.toFixed(0);
|
|
18273
|
-
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.area.acres;
|
|
18274
|
-
} else if (area2 < 25900404) {
|
|
18275
|
-
this.imperialArea = miles2.toFixed(2);
|
|
18276
|
-
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.area.miles2;
|
|
18277
|
-
} else if (area2 < 259004040) {
|
|
18278
|
-
this.imperialArea = miles2.toFixed(1);
|
|
18279
|
-
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.area.miles2;
|
|
18280
|
-
} else {
|
|
18281
|
-
this.imperialArea = miles2.toFixed(0);
|
|
18282
|
-
this.imperialUnit = config.markers.markerInfoIcon.units.imperial.area.miles2;
|
|
18292
|
+
const intersection3 = this.turfHelper.getIntersection(polygon1, polygon2);
|
|
18293
|
+
if (!intersection3) {
|
|
18294
|
+
return union3;
|
|
18283
18295
|
}
|
|
18296
|
+
const donut = this.turfHelper.polygonDifference(union3, intersection3);
|
|
18297
|
+
return donut;
|
|
18298
|
+
} catch (error) {
|
|
18299
|
+
console.warn("Error in createDonutFromIntersection:", error.message);
|
|
18300
|
+
return null;
|
|
18284
18301
|
}
|
|
18285
18302
|
}
|
|
18286
18303
|
}
|
|
18304
|
+
class IconFactory {
|
|
18305
|
+
/**
|
|
18306
|
+
* Creates a DivIcon with the given class names.
|
|
18307
|
+
* @param classNames Array of class names to apply.
|
|
18308
|
+
* @returns A Leaflet DivIcon.
|
|
18309
|
+
*/
|
|
18310
|
+
static createDivIcon(classNames) {
|
|
18311
|
+
const classes = classNames.join(" ");
|
|
18312
|
+
return L.divIcon({ className: classes });
|
|
18313
|
+
}
|
|
18314
|
+
}
|
|
18287
18315
|
class PolygonInteractionManager {
|
|
18288
18316
|
constructor(dependencies, featureGroupAccess) {
|
|
18317
|
+
__publicField(this, "_activeMarker", null);
|
|
18318
|
+
__publicField(this, "isDraggingMarker", false);
|
|
18289
18319
|
__publicField(this, "turfHelper");
|
|
18290
18320
|
__publicField(this, "polygonInformation");
|
|
18291
18321
|
__publicField(this, "map");
|
|
@@ -18302,6 +18332,7 @@ class PolygonInteractionManager {
|
|
|
18302
18332
|
__publicField(this, "removeFeatureGroup");
|
|
18303
18333
|
// Polygon dragging methods
|
|
18304
18334
|
__publicField(this, "onPolygonMouseMove", (e) => {
|
|
18335
|
+
console.log("PolygonInteractionManager onPolygonMouseMove");
|
|
18305
18336
|
if (!this.currentDragPolygon || !this.currentDragPolygon._polydrawDragData.isDragging) return;
|
|
18306
18337
|
const polygon2 = this.currentDragPolygon;
|
|
18307
18338
|
const dragData = polygon2._polydrawDragData;
|
|
@@ -18319,6 +18350,7 @@ class PolygonInteractionManager {
|
|
|
18319
18350
|
this.updateMarkersAndHoleLinesDuringDrag(polygon2, offsetLat, offsetLng);
|
|
18320
18351
|
});
|
|
18321
18352
|
__publicField(this, "onPolygonMouseUp", (e) => {
|
|
18353
|
+
console.log("PolygonInteractionManager onPolygonMouseUp");
|
|
18322
18354
|
if (!this.currentDragPolygon || !this.currentDragPolygon._polydrawDragData.isDragging) return;
|
|
18323
18355
|
const polygon2 = this.currentDragPolygon;
|
|
18324
18356
|
const dragData = polygon2._polydrawDragData;
|
|
@@ -18348,6 +18380,7 @@ class PolygonInteractionManager {
|
|
|
18348
18380
|
this.currentDragPolygon = null;
|
|
18349
18381
|
});
|
|
18350
18382
|
__publicField(this, "onMarkerHoverForEdgeDeletionEvent", (e) => {
|
|
18383
|
+
console.log("PolygonInteractionManager onMarkerHoverForEdgeDeletionEvent");
|
|
18351
18384
|
if (!this.isModifierKeyHeld) return;
|
|
18352
18385
|
const element = e.target;
|
|
18353
18386
|
if (element) {
|
|
@@ -18357,6 +18390,7 @@ class PolygonInteractionManager {
|
|
|
18357
18390
|
}
|
|
18358
18391
|
});
|
|
18359
18392
|
__publicField(this, "onMarkerLeaveForEdgeDeletionEvent", (e) => {
|
|
18393
|
+
console.log("PolygonInteractionManager onMarkerLeaveForEdgeDeletionEvent");
|
|
18360
18394
|
const element = e.target;
|
|
18361
18395
|
if (element) {
|
|
18362
18396
|
element.style.backgroundColor = "";
|
|
@@ -18364,6 +18398,7 @@ class PolygonInteractionManager {
|
|
|
18364
18398
|
element.classList.remove("edge-deletion-hover");
|
|
18365
18399
|
}
|
|
18366
18400
|
});
|
|
18401
|
+
console.log("PolygonInteractionManager constructor");
|
|
18367
18402
|
this.turfHelper = dependencies.turfHelper;
|
|
18368
18403
|
this.polygonInformation = dependencies.polygonInformation;
|
|
18369
18404
|
this.map = dependencies.map;
|
|
@@ -18377,6 +18412,7 @@ class PolygonInteractionManager {
|
|
|
18377
18412
|
* Add event listener
|
|
18378
18413
|
*/
|
|
18379
18414
|
on(event, callback) {
|
|
18415
|
+
console.log("PolygonInteractionManager on");
|
|
18380
18416
|
if (!this.eventListeners.has(event)) {
|
|
18381
18417
|
this.eventListeners.set(event, []);
|
|
18382
18418
|
}
|
|
@@ -18386,6 +18422,7 @@ class PolygonInteractionManager {
|
|
|
18386
18422
|
* Emit event to all listeners
|
|
18387
18423
|
*/
|
|
18388
18424
|
emit(event, data) {
|
|
18425
|
+
console.log("PolygonInteractionManager emit");
|
|
18389
18426
|
const listeners = this.eventListeners.get(event);
|
|
18390
18427
|
if (listeners) {
|
|
18391
18428
|
listeners.forEach((callback) => callback(data));
|
|
@@ -18395,6 +18432,7 @@ class PolygonInteractionManager {
|
|
|
18395
18432
|
* Add markers to a polygon feature group
|
|
18396
18433
|
*/
|
|
18397
18434
|
addMarkers(latlngs, featureGroup) {
|
|
18435
|
+
console.log("PolygonInteractionManager addMarkers");
|
|
18398
18436
|
let menuMarkerIdx = this.getMarkerIndex(latlngs, this.config.markers.markerMenuIcon.position);
|
|
18399
18437
|
let deleteMarkerIdx = this.getMarkerIndex(
|
|
18400
18438
|
latlngs,
|
|
@@ -18428,6 +18466,53 @@ class PolygonInteractionManager {
|
|
|
18428
18466
|
zIndexOffset: this.config.markers.markerIcon.zIndexOffset ?? this.config.markers.zIndexOffset
|
|
18429
18467
|
});
|
|
18430
18468
|
featureGroup.addLayer(marker).addTo(this.map);
|
|
18469
|
+
marker._polydrawFeatureGroup = featureGroup;
|
|
18470
|
+
marker.on("add", () => {
|
|
18471
|
+
const el2 = marker.getElement();
|
|
18472
|
+
if (el2) el2.style.pointerEvents = "auto";
|
|
18473
|
+
});
|
|
18474
|
+
marker.on("click", (e) => {
|
|
18475
|
+
var _a2, _b2;
|
|
18476
|
+
if (this.isDraggingMarker) {
|
|
18477
|
+
(_b2 = (_a2 = e.originalEvent) == null ? void 0 : _a2.stopPropagation) == null ? void 0 : _b2.call(_a2);
|
|
18478
|
+
L.DomEvent.stopPropagation(e);
|
|
18479
|
+
}
|
|
18480
|
+
});
|
|
18481
|
+
marker.on("dragstart", () => {
|
|
18482
|
+
this.isDraggingMarker = true;
|
|
18483
|
+
this._activeMarker = marker;
|
|
18484
|
+
});
|
|
18485
|
+
marker.on("dragend", (e) => {
|
|
18486
|
+
const fg = marker._polydrawFeatureGroup;
|
|
18487
|
+
if (this.modeManager.canPerformAction("markerDrag") && fg) {
|
|
18488
|
+
this.markerDragEnd(fg);
|
|
18489
|
+
}
|
|
18490
|
+
this._activeMarker = null;
|
|
18491
|
+
L.DomEvent.stopPropagation(e);
|
|
18492
|
+
setTimeout(() => {
|
|
18493
|
+
this.isDraggingMarker = false;
|
|
18494
|
+
}, 10);
|
|
18495
|
+
});
|
|
18496
|
+
const el = marker.getElement();
|
|
18497
|
+
if (el) {
|
|
18498
|
+
el.addEventListener("touchstart", (e) => {
|
|
18499
|
+
console.log("marker touchstart");
|
|
18500
|
+
e.stopPropagation();
|
|
18501
|
+
});
|
|
18502
|
+
el.addEventListener("touchend", (e) => {
|
|
18503
|
+
console.log("marker touchend");
|
|
18504
|
+
e.preventDefault();
|
|
18505
|
+
e.stopPropagation();
|
|
18506
|
+
marker.fire("click");
|
|
18507
|
+
if (this.isDraggingMarker) {
|
|
18508
|
+
const fg = marker._polydrawFeatureGroup;
|
|
18509
|
+
if (this.modeManager.canPerformAction("markerDrag") && fg) {
|
|
18510
|
+
this.markerDragEnd(fg);
|
|
18511
|
+
}
|
|
18512
|
+
}
|
|
18513
|
+
this._activeMarker = null;
|
|
18514
|
+
});
|
|
18515
|
+
}
|
|
18431
18516
|
if (i === menuMarkerIdx || i === deleteMarkerIdx || i === infoMarkerIdx) {
|
|
18432
18517
|
const element = marker.getElement();
|
|
18433
18518
|
if (element) {
|
|
@@ -18435,38 +18520,74 @@ class PolygonInteractionManager {
|
|
|
18435
18520
|
}
|
|
18436
18521
|
}
|
|
18437
18522
|
if (this.config.modes.dragElbow) {
|
|
18438
|
-
|
|
18439
|
-
if (this.modeManager.canPerformAction("markerDrag")) {
|
|
18440
|
-
this.markerDrag(featureGroup);
|
|
18441
|
-
}
|
|
18442
|
-
});
|
|
18443
|
-
marker.on("dragend", (e) => {
|
|
18523
|
+
const createDragHandler = (fg) => () => {
|
|
18444
18524
|
if (this.modeManager.canPerformAction("markerDrag")) {
|
|
18445
|
-
this.
|
|
18525
|
+
this.markerDrag(fg);
|
|
18446
18526
|
}
|
|
18447
|
-
}
|
|
18527
|
+
};
|
|
18528
|
+
marker.on("drag", createDragHandler(featureGroup));
|
|
18448
18529
|
}
|
|
18449
18530
|
if (i === menuMarkerIdx && this.config.markers.menuMarker) {
|
|
18450
|
-
const menuPopup = this.generateMenuMarkerPopup(latlngs, featureGroup);
|
|
18451
18531
|
marker.options.zIndexOffset = this.config.markers.markerMenuIcon.zIndexOffset ?? this.config.markers.zIndexOffset;
|
|
18452
|
-
marker.
|
|
18532
|
+
marker.on("click", () => {
|
|
18533
|
+
console.log("menu marker clicked");
|
|
18534
|
+
marker.unbindPopup();
|
|
18535
|
+
const menuPopup = this.generateMenuMarkerPopup(latlngs, featureGroup);
|
|
18536
|
+
marker.bindPopup(menuPopup, { className: "alter-marker" });
|
|
18537
|
+
marker.openPopup();
|
|
18538
|
+
});
|
|
18539
|
+
marker.on("popupopen", () => {
|
|
18540
|
+
console.log("popupopen, setting touchAction to manipulation");
|
|
18541
|
+
const container2 = this.map.getContainer();
|
|
18542
|
+
if (container2) {
|
|
18543
|
+
container2.style.touchAction = "manipulation";
|
|
18544
|
+
}
|
|
18545
|
+
});
|
|
18546
|
+
marker.on("popupclose", () => {
|
|
18547
|
+
console.log("popupclose, resetting touchAction");
|
|
18548
|
+
const container2 = this.map.getContainer();
|
|
18549
|
+
if (container2) {
|
|
18550
|
+
container2.style.touchAction = "";
|
|
18551
|
+
}
|
|
18552
|
+
});
|
|
18453
18553
|
}
|
|
18454
18554
|
if (i === infoMarkerIdx && this.config.markers.infoMarker) {
|
|
18455
18555
|
const polygonGeoJSON = this.getPolygonGeoJSONFromFeatureGroup(featureGroup);
|
|
18456
18556
|
const area2 = this.turfHelper.getPolygonArea(polygonGeoJSON);
|
|
18457
18557
|
const perimeter = this.getTotalPolygonPerimeter(polygonGeoJSON);
|
|
18458
|
-
const infoPopup = this.generateInfoMarkerPopup(area2, perimeter);
|
|
18459
18558
|
marker.options.zIndexOffset = this.config.markers.markerInfoIcon.zIndexOffset ?? this.config.markers.zIndexOffset;
|
|
18460
|
-
marker.
|
|
18559
|
+
marker.on("click", () => {
|
|
18560
|
+
console.log("info marker clicked");
|
|
18561
|
+
marker.unbindPopup();
|
|
18562
|
+
const infoPopup = this.generateInfoMarkerPopup(area2, perimeter);
|
|
18563
|
+
marker.bindPopup(infoPopup, { className: "info-marker" });
|
|
18564
|
+
marker.openPopup();
|
|
18565
|
+
});
|
|
18566
|
+
marker.on("popupopen", () => {
|
|
18567
|
+
console.log("popupopen, setting touchAction to manipulation");
|
|
18568
|
+
const container2 = this.map.getContainer();
|
|
18569
|
+
if (container2) {
|
|
18570
|
+
container2.style.touchAction = "manipulation";
|
|
18571
|
+
}
|
|
18572
|
+
});
|
|
18573
|
+
marker.on("popupclose", () => {
|
|
18574
|
+
console.log("popupclose, resetting touchAction");
|
|
18575
|
+
const container2 = this.map.getContainer();
|
|
18576
|
+
if (container2) {
|
|
18577
|
+
container2.style.touchAction = "";
|
|
18578
|
+
}
|
|
18579
|
+
});
|
|
18461
18580
|
}
|
|
18462
18581
|
marker.on("mousedown", (e) => {
|
|
18463
18582
|
if (!this.modeManager.isInOffMode()) {
|
|
18464
18583
|
L.DomEvent.stopPropagation(e);
|
|
18465
18584
|
this.map.fire("mousedown", e);
|
|
18466
18585
|
}
|
|
18586
|
+
this._activeMarker = marker;
|
|
18467
18587
|
});
|
|
18468
18588
|
marker.on("click", (e) => {
|
|
18469
18589
|
var _a2;
|
|
18590
|
+
console.log("marker click");
|
|
18470
18591
|
if (this.modeManager.isInOffMode()) {
|
|
18471
18592
|
if (this.isModifierKeyPressed(e.originalEvent)) {
|
|
18472
18593
|
const poly = (_a2 = featureGroup.getLayers().find((layer) => layer instanceof L.Polygon)) == null ? void 0 : _a2.toGeoJSON();
|
|
@@ -18485,11 +18606,16 @@ class PolygonInteractionManager {
|
|
|
18485
18606
|
marker.on("mouseover", () => this.onMarkerHoverForEdgeDeletion(marker, true));
|
|
18486
18607
|
marker.on("mouseout", () => this.onMarkerHoverForEdgeDeletion(marker, false));
|
|
18487
18608
|
});
|
|
18609
|
+
const container = this.map.getContainer();
|
|
18610
|
+
if (container) {
|
|
18611
|
+
container.style.touchAction = "manipulation";
|
|
18612
|
+
}
|
|
18488
18613
|
}
|
|
18489
18614
|
/**
|
|
18490
18615
|
* Add hole markers to a polygon feature group
|
|
18491
18616
|
*/
|
|
18492
18617
|
addHoleMarkers(latlngs, featureGroup) {
|
|
18618
|
+
console.log("PolygonInteractionManager addHoleMarkers");
|
|
18493
18619
|
latlngs.forEach((latlng, i) => {
|
|
18494
18620
|
const iconClasses = this.config.markers.holeIcon.styleClasses;
|
|
18495
18621
|
const processedClasses = Array.isArray(iconClasses) ? iconClasses : [iconClasses];
|
|
@@ -18500,6 +18626,18 @@ class PolygonInteractionManager {
|
|
|
18500
18626
|
zIndexOffset: this.config.markers.holeIcon.zIndexOffset ?? this.config.markers.zIndexOffset
|
|
18501
18627
|
});
|
|
18502
18628
|
featureGroup.addLayer(marker).addTo(this.map);
|
|
18629
|
+
marker.on("add", () => {
|
|
18630
|
+
const el = marker.getElement();
|
|
18631
|
+
if (el) el.style.pointerEvents = "auto";
|
|
18632
|
+
});
|
|
18633
|
+
marker.on("click", (e) => {
|
|
18634
|
+
var _a2, _b2;
|
|
18635
|
+
(_b2 = (_a2 = e.originalEvent) == null ? void 0 : _a2.stopPropagation) == null ? void 0 : _b2.call(_a2);
|
|
18636
|
+
L.DomEvent.stopPropagation(e);
|
|
18637
|
+
});
|
|
18638
|
+
marker.on("dragend", (e) => {
|
|
18639
|
+
L.DomEvent.stopPropagation(e);
|
|
18640
|
+
});
|
|
18503
18641
|
marker.on("drag", (e) => {
|
|
18504
18642
|
this.markerDrag(featureGroup);
|
|
18505
18643
|
});
|
|
@@ -18512,6 +18650,7 @@ class PolygonInteractionManager {
|
|
|
18512
18650
|
* Add edge click listeners to a polygon
|
|
18513
18651
|
*/
|
|
18514
18652
|
addEdgeClickListeners(polygon2, featureGroup) {
|
|
18653
|
+
console.log("PolygonInteractionManager addEdgeClickListeners");
|
|
18515
18654
|
const rawLatLngs = polygon2.getLatLngs();
|
|
18516
18655
|
let processedRings;
|
|
18517
18656
|
if (Array.isArray(rawLatLngs) && rawLatLngs.length > 0) {
|
|
@@ -18574,6 +18713,7 @@ class PolygonInteractionManager {
|
|
|
18574
18713
|
* Enable polygon dragging functionality
|
|
18575
18714
|
*/
|
|
18576
18715
|
enablePolygonDragging(polygon2, latlngs) {
|
|
18716
|
+
console.log("PolygonInteractionManager enablePolygonDragging");
|
|
18577
18717
|
if (!this.config.modes.dragPolygons) return;
|
|
18578
18718
|
polygon2._polydrawOriginalLatLngs = latlngs;
|
|
18579
18719
|
polygon2._polydrawDragData = {
|
|
@@ -18582,6 +18722,7 @@ class PolygonInteractionManager {
|
|
|
18582
18722
|
startLatLngs: null
|
|
18583
18723
|
};
|
|
18584
18724
|
polygon2.on("mousedown", (e) => {
|
|
18725
|
+
console.log("polygon mousedown");
|
|
18585
18726
|
if (!this.modeManager.isInOffMode()) {
|
|
18586
18727
|
L.DomEvent.stopPropagation(e);
|
|
18587
18728
|
this.map.fire("mousedown", e);
|
|
@@ -18634,6 +18775,7 @@ class PolygonInteractionManager {
|
|
|
18634
18775
|
* Update marker draggable state based on current mode
|
|
18635
18776
|
*/
|
|
18636
18777
|
updateMarkerDraggableState() {
|
|
18778
|
+
console.log("PolygonInteractionManager updateMarkerDraggableState");
|
|
18637
18779
|
const shouldBeDraggable = this.modeManager.canPerformAction("markerDrag");
|
|
18638
18780
|
this.getFeatureGroups().forEach((featureGroup) => {
|
|
18639
18781
|
featureGroup.eachLayer((layer) => {
|
|
@@ -18658,6 +18800,7 @@ class PolygonInteractionManager {
|
|
|
18658
18800
|
* Update all markers for edge deletion visual feedback
|
|
18659
18801
|
*/
|
|
18660
18802
|
updateAllMarkersForEdgeDeletion(showFeedback) {
|
|
18803
|
+
console.log("PolygonInteractionManager updateAllMarkersForEdgeDeletion");
|
|
18661
18804
|
this.getFeatureGroups().forEach((featureGroup) => {
|
|
18662
18805
|
featureGroup.eachLayer((layer) => {
|
|
18663
18806
|
if (layer instanceof L.Marker) {
|
|
@@ -18670,6 +18813,7 @@ class PolygonInteractionManager {
|
|
|
18670
18813
|
* Update individual marker for edge deletion visual feedback
|
|
18671
18814
|
*/
|
|
18672
18815
|
updateMarkerForEdgeDeletion(marker, showFeedback) {
|
|
18816
|
+
console.log("PolygonInteractionManager updateMarkerForEdgeDeletion");
|
|
18673
18817
|
const element = marker.getElement();
|
|
18674
18818
|
if (!element) return;
|
|
18675
18819
|
if (showFeedback) {
|
|
@@ -18686,10 +18830,12 @@ class PolygonInteractionManager {
|
|
|
18686
18830
|
* Set modifier key held state
|
|
18687
18831
|
*/
|
|
18688
18832
|
setModifierKeyHeld(isHeld) {
|
|
18833
|
+
console.log("PolygonInteractionManager setModifierKeyHeld");
|
|
18689
18834
|
this.isModifierKeyHeld = isHeld;
|
|
18690
18835
|
}
|
|
18691
18836
|
// Private methods
|
|
18692
18837
|
onEdgeClick(e, edgePolyline) {
|
|
18838
|
+
console.log("onEdgeClick");
|
|
18693
18839
|
if (!this.config.modes.attachElbow) {
|
|
18694
18840
|
return;
|
|
18695
18841
|
}
|
|
@@ -18729,6 +18875,7 @@ class PolygonInteractionManager {
|
|
|
18729
18875
|
L.DomEvent.stopPropagation(e);
|
|
18730
18876
|
}
|
|
18731
18877
|
highlightEdgeOnHover(edgePolyline, isHovering) {
|
|
18878
|
+
console.log("PolygonInteractionManager highlightEdgeOnHover");
|
|
18732
18879
|
if (isHovering) {
|
|
18733
18880
|
edgePolyline.setStyle({
|
|
18734
18881
|
color: "#7a9441",
|
|
@@ -18744,6 +18891,7 @@ class PolygonInteractionManager {
|
|
|
18744
18891
|
}
|
|
18745
18892
|
}
|
|
18746
18893
|
elbowClicked(e, poly) {
|
|
18894
|
+
console.log("elbowClicked");
|
|
18747
18895
|
if (!this.config.modes.edgeDeletion) {
|
|
18748
18896
|
return;
|
|
18749
18897
|
}
|
|
@@ -18792,6 +18940,7 @@ class PolygonInteractionManager {
|
|
|
18792
18940
|
});
|
|
18793
18941
|
}
|
|
18794
18942
|
findFeatureGroupForPoly(poly) {
|
|
18943
|
+
console.log("PolygonInteractionManager findFeatureGroupForPoly");
|
|
18795
18944
|
for (const featureGroup of this.getFeatureGroups()) {
|
|
18796
18945
|
const featureCollection2 = featureGroup.toGeoJSON();
|
|
18797
18946
|
if (featureCollection2 && featureCollection2.features && featureCollection2.features[0]) {
|
|
@@ -18804,6 +18953,11 @@ class PolygonInteractionManager {
|
|
|
18804
18953
|
return null;
|
|
18805
18954
|
}
|
|
18806
18955
|
markerDrag(featureGroup) {
|
|
18956
|
+
if (!this._activeMarker) {
|
|
18957
|
+
console.warn("No active marker set for dragging.");
|
|
18958
|
+
return;
|
|
18959
|
+
}
|
|
18960
|
+
console.log("PolygonInteractionManager markerDrag", featureGroup);
|
|
18807
18961
|
const newPos = [];
|
|
18808
18962
|
let testarray = [];
|
|
18809
18963
|
let hole = [];
|
|
@@ -18879,6 +19033,7 @@ class PolygonInteractionManager {
|
|
|
18879
19033
|
layerLength[0].setLatLngs(newPos);
|
|
18880
19034
|
}
|
|
18881
19035
|
async markerDragEnd(featureGroup) {
|
|
19036
|
+
console.log("PolygonInteractionManager markerDragEnd");
|
|
18882
19037
|
this.polygonInformation.deletePolygonInformationStorage();
|
|
18883
19038
|
const featureCollection2 = featureGroup.toGeoJSON();
|
|
18884
19039
|
this.removeFeatureGroup(featureGroup);
|
|
@@ -18926,6 +19081,7 @@ class PolygonInteractionManager {
|
|
|
18926
19081
|
this.polygonInformation.createPolygonInformationStorage(this.getFeatureGroups());
|
|
18927
19082
|
}
|
|
18928
19083
|
offsetPolygonCoordinates(latLngs, offsetLat, offsetLng) {
|
|
19084
|
+
console.log("PolygonInteractionManager offsetPolygonCoordinates");
|
|
18929
19085
|
if (!latLngs) return latLngs;
|
|
18930
19086
|
if (Array.isArray(latLngs[0])) {
|
|
18931
19087
|
return latLngs.map((ring) => this.offsetPolygonCoordinates(ring, offsetLat, offsetLng));
|
|
@@ -18941,6 +19097,7 @@ class PolygonInteractionManager {
|
|
|
18941
19097
|
}
|
|
18942
19098
|
}
|
|
18943
19099
|
updateMarkersAndHoleLinesDuringDrag(polygon2, offsetLat, offsetLng) {
|
|
19100
|
+
console.log("PolygonInteractionManager updateMarkersAndHoleLinesDuringDrag");
|
|
18944
19101
|
try {
|
|
18945
19102
|
let featureGroup = null;
|
|
18946
19103
|
for (const fg of this.getFeatureGroups()) {
|
|
@@ -18997,6 +19154,7 @@ class PolygonInteractionManager {
|
|
|
18997
19154
|
}
|
|
18998
19155
|
}
|
|
18999
19156
|
async updatePolygonAfterDrag(polygon2) {
|
|
19157
|
+
console.log("PolygonInteractionManager updatePolygonAfterDrag");
|
|
19000
19158
|
try {
|
|
19001
19159
|
let featureGroup = null;
|
|
19002
19160
|
for (const fg of this.getFeatureGroups()) {
|
|
@@ -19030,9 +19188,13 @@ class PolygonInteractionManager {
|
|
|
19030
19188
|
}
|
|
19031
19189
|
detectModifierKey(event) {
|
|
19032
19190
|
var _a2, _b2;
|
|
19191
|
+
console.log("PolygonInteractionManager detectModifierKey");
|
|
19033
19192
|
if (!((_b2 = (_a2 = this.config.dragPolygons) == null ? void 0 : _a2.modifierSubtract) == null ? void 0 : _b2.enabled)) {
|
|
19034
19193
|
return false;
|
|
19035
19194
|
}
|
|
19195
|
+
if (isTouchDevice()) {
|
|
19196
|
+
return false;
|
|
19197
|
+
}
|
|
19036
19198
|
const userAgent = navigator.userAgent.toLowerCase();
|
|
19037
19199
|
const isMac = userAgent.includes("mac");
|
|
19038
19200
|
if (isMac) {
|
|
@@ -19042,6 +19204,7 @@ class PolygonInteractionManager {
|
|
|
19042
19204
|
}
|
|
19043
19205
|
}
|
|
19044
19206
|
setSubtractVisualMode(polygon2, enabled) {
|
|
19207
|
+
console.log("PolygonInteractionManager setSubtractVisualMode");
|
|
19045
19208
|
if (!polygon2 || !polygon2.setStyle) {
|
|
19046
19209
|
return;
|
|
19047
19210
|
}
|
|
@@ -19061,6 +19224,7 @@ class PolygonInteractionManager {
|
|
|
19061
19224
|
}
|
|
19062
19225
|
updateMarkerColorsForSubtractMode(polygon2, subtractMode) {
|
|
19063
19226
|
var _a2, _b2;
|
|
19227
|
+
console.log("PolygonInteractionManager updateMarkerColorsForSubtractMode");
|
|
19064
19228
|
try {
|
|
19065
19229
|
let featureGroup = null;
|
|
19066
19230
|
for (const fg of this.getFeatureGroups()) {
|
|
@@ -19106,6 +19270,7 @@ class PolygonInteractionManager {
|
|
|
19106
19270
|
}
|
|
19107
19271
|
}
|
|
19108
19272
|
handleModifierToggleDuringDrag(event) {
|
|
19273
|
+
console.log("PolygonInteractionManager handleModifierToggleDuringDrag");
|
|
19109
19274
|
const isModifierPressed = this.detectModifierKey(event);
|
|
19110
19275
|
this.currentModifierDragMode = isModifierPressed;
|
|
19111
19276
|
this.isModifierKeyHeld = isModifierPressed;
|
|
@@ -19114,9 +19279,11 @@ class PolygonInteractionManager {
|
|
|
19114
19279
|
}
|
|
19115
19280
|
}
|
|
19116
19281
|
isModifierDragActive() {
|
|
19282
|
+
console.log("PolygonInteractionManager isModifierDragActive");
|
|
19117
19283
|
return this.currentModifierDragMode;
|
|
19118
19284
|
}
|
|
19119
19285
|
performModifierSubtract(draggedGeoJSON, originalFeatureGroup) {
|
|
19286
|
+
console.log("PolygonInteractionManager performModifierSubtract");
|
|
19120
19287
|
try {
|
|
19121
19288
|
const draggedPolygon = this.turfHelper.getTurfPolygon(draggedGeoJSON);
|
|
19122
19289
|
const intersectingFeatureGroups = [];
|
|
@@ -19198,6 +19365,10 @@ class PolygonInteractionManager {
|
|
|
19198
19365
|
return !(bbox1[2] < bbox2[0] || bbox2[2] < bbox1[0] || bbox1[3] < bbox2[1] || bbox2[3] < bbox1[1]);
|
|
19199
19366
|
}
|
|
19200
19367
|
isModifierKeyPressed(event) {
|
|
19368
|
+
console.log("PolygonInteractionManager isModifierKeyPressed");
|
|
19369
|
+
if (isTouchDevice()) {
|
|
19370
|
+
return false;
|
|
19371
|
+
}
|
|
19201
19372
|
const userAgent = navigator.userAgent.toLowerCase();
|
|
19202
19373
|
const isMac = userAgent.includes("mac");
|
|
19203
19374
|
if (isMac) {
|
|
@@ -19207,6 +19378,7 @@ class PolygonInteractionManager {
|
|
|
19207
19378
|
}
|
|
19208
19379
|
}
|
|
19209
19380
|
onMarkerHoverForEdgeDeletion(marker, isHovering) {
|
|
19381
|
+
console.log("PolygonInteractionManager onMarkerHoverForEdgeDeletion");
|
|
19210
19382
|
const element = marker.getElement();
|
|
19211
19383
|
if (!element) return;
|
|
19212
19384
|
if (isHovering) {
|
|
@@ -19259,6 +19431,7 @@ class PolygonInteractionManager {
|
|
|
19259
19431
|
}
|
|
19260
19432
|
// Helper methods
|
|
19261
19433
|
getMarkerIndex(latlngs, position) {
|
|
19434
|
+
console.log("PolygonInteractionManager getMarkerIndex");
|
|
19262
19435
|
const bounds = PolyDrawUtil.getBounds(latlngs, Math.sqrt(2) / 2);
|
|
19263
19436
|
const compass = new Compass(
|
|
19264
19437
|
bounds.getSouth(),
|
|
@@ -19277,6 +19450,7 @@ class PolygonInteractionManager {
|
|
|
19277
19450
|
return nearestPointIdx;
|
|
19278
19451
|
}
|
|
19279
19452
|
ensureMarkerSeparation(polygonLength, markers2) {
|
|
19453
|
+
console.log("PolygonInteractionManager ensureMarkerSeparation");
|
|
19280
19454
|
const enabledMarkers = [];
|
|
19281
19455
|
if (markers2.menu.enabled) {
|
|
19282
19456
|
enabledMarkers.push({ type: "menu", index: markers2.menu.index });
|
|
@@ -19319,6 +19493,7 @@ class PolygonInteractionManager {
|
|
|
19319
19493
|
};
|
|
19320
19494
|
}
|
|
19321
19495
|
findAlternativeMarkerPosition(polygonLength, originalIndex, usedIndices) {
|
|
19496
|
+
console.log("PolygonInteractionManager findAlternativeMarkerPosition");
|
|
19322
19497
|
const maxAttempts = polygonLength;
|
|
19323
19498
|
const step = Math.max(1, Math.floor(polygonLength / 8));
|
|
19324
19499
|
for (let attempt = 1; attempt < maxAttempts; attempt++) {
|
|
@@ -19340,12 +19515,15 @@ class PolygonInteractionManager {
|
|
|
19340
19515
|
return originalIndex;
|
|
19341
19516
|
}
|
|
19342
19517
|
createDivIcon(processedClasses) {
|
|
19518
|
+
console.log("PolygonInteractionManager createDivIcon");
|
|
19343
19519
|
return IconFactory.createDivIcon(processedClasses);
|
|
19344
19520
|
}
|
|
19345
19521
|
getLatLngInfoString(latlng) {
|
|
19522
|
+
console.log("PolygonInteractionManager getLatLngInfoString");
|
|
19346
19523
|
return "Latitude: " + latlng.lat + " Longitude: " + latlng.lng;
|
|
19347
19524
|
}
|
|
19348
19525
|
generateMenuMarkerPopup(latLngs, featureGroup) {
|
|
19526
|
+
console.log("PolygonInteractionManager generateMenuMarkerPopup");
|
|
19349
19527
|
const outerWrapper = document.createElement("div");
|
|
19350
19528
|
outerWrapper.classList.add("alter-marker-outer-wrapper");
|
|
19351
19529
|
const wrapper = document.createElement("div");
|
|
@@ -19385,21 +19563,53 @@ class PolygonInteractionManager {
|
|
|
19385
19563
|
markerContentWrapper.appendChild(bbox2);
|
|
19386
19564
|
markerContentWrapper.appendChild(separator.cloneNode());
|
|
19387
19565
|
markerContentWrapper.appendChild(bezier2);
|
|
19566
|
+
simplify3.addEventListener("touchend", (e) => {
|
|
19567
|
+
console.log("simplify touchend");
|
|
19568
|
+
e.preventDefault();
|
|
19569
|
+
e.stopPropagation();
|
|
19570
|
+
this.emit("menuAction", { action: "simplify", latLngs, featureGroup });
|
|
19571
|
+
});
|
|
19388
19572
|
simplify3.onclick = () => {
|
|
19573
|
+
console.log("simplify clicked");
|
|
19389
19574
|
this.emit("menuAction", { action: "simplify", latLngs, featureGroup });
|
|
19390
19575
|
};
|
|
19576
|
+
bbox2.addEventListener("touchend", (e) => {
|
|
19577
|
+
console.log("bbox touchend");
|
|
19578
|
+
e.preventDefault();
|
|
19579
|
+
e.stopPropagation();
|
|
19580
|
+
this.emit("menuAction", { action: "bbox", latLngs, featureGroup });
|
|
19581
|
+
});
|
|
19391
19582
|
bbox2.onclick = () => {
|
|
19392
19583
|
this.emit("menuAction", { action: "bbox", latLngs, featureGroup });
|
|
19393
19584
|
};
|
|
19585
|
+
doubleElbows.addEventListener("touchend", (e) => {
|
|
19586
|
+
console.log("doubleElbows touchend");
|
|
19587
|
+
e.preventDefault();
|
|
19588
|
+
e.stopPropagation();
|
|
19589
|
+
this.emit("menuAction", { action: "doubleElbows", latLngs, featureGroup });
|
|
19590
|
+
});
|
|
19394
19591
|
doubleElbows.onclick = () => {
|
|
19395
19592
|
this.emit("menuAction", { action: "doubleElbows", latLngs, featureGroup });
|
|
19396
19593
|
};
|
|
19594
|
+
bezier2.addEventListener("touchend", (e) => {
|
|
19595
|
+
console.log("bezier touchend");
|
|
19596
|
+
e.preventDefault();
|
|
19597
|
+
e.stopPropagation();
|
|
19598
|
+
this.emit("menuAction", { action: "bezier", latLngs, featureGroup });
|
|
19599
|
+
});
|
|
19397
19600
|
bezier2.onclick = () => {
|
|
19398
19601
|
this.emit("menuAction", { action: "bezier", latLngs, featureGroup });
|
|
19399
19602
|
};
|
|
19603
|
+
L.DomEvent.disableClickPropagation(outerWrapper);
|
|
19604
|
+
outerWrapper.style.pointerEvents = "auto";
|
|
19605
|
+
outerWrapper.querySelectorAll(".marker-menu-button").forEach((btn) => {
|
|
19606
|
+
btn.style.pointerEvents = "auto";
|
|
19607
|
+
btn.addEventListener("click", (e) => e.stopPropagation());
|
|
19608
|
+
});
|
|
19400
19609
|
return outerWrapper;
|
|
19401
19610
|
}
|
|
19402
19611
|
getPolygonGeoJSONFromFeatureGroup(featureGroup) {
|
|
19612
|
+
console.log("PolygonInteractionManager getPolygonGeoJSONFromFeatureGroup");
|
|
19403
19613
|
try {
|
|
19404
19614
|
let polygon2 = null;
|
|
19405
19615
|
featureGroup.eachLayer((layer) => {
|
|
@@ -19432,6 +19642,7 @@ class PolygonInteractionManager {
|
|
|
19432
19642
|
}
|
|
19433
19643
|
}
|
|
19434
19644
|
getTotalPolygonPerimeter(polygonGeoJSON) {
|
|
19645
|
+
console.log("PolygonInteractionManager getTotalPolygonPerimeter");
|
|
19435
19646
|
try {
|
|
19436
19647
|
if (!polygonGeoJSON || !polygonGeoJSON.geometry) {
|
|
19437
19648
|
return 0;
|
|
@@ -19475,6 +19686,7 @@ class PolygonInteractionManager {
|
|
|
19475
19686
|
}
|
|
19476
19687
|
}
|
|
19477
19688
|
generateInfoMarkerPopup(area2, perimeter) {
|
|
19689
|
+
console.log("PolygonInteractionManager generateInfoMarkerPopup");
|
|
19478
19690
|
const _perimeter = new Perimeter(perimeter, this.config);
|
|
19479
19691
|
const _area = new Area(area2, this.config);
|
|
19480
19692
|
const outerWrapper = document.createElement("div");
|
|
@@ -19499,6 +19711,12 @@ class PolygonInteractionManager {
|
|
|
19499
19711
|
outerWrapper.appendChild(wrapper);
|
|
19500
19712
|
wrapper.appendChild(invertedCorner);
|
|
19501
19713
|
wrapper.appendChild(markerContent);
|
|
19714
|
+
L.DomEvent.disableClickPropagation(outerWrapper);
|
|
19715
|
+
outerWrapper.style.pointerEvents = "auto";
|
|
19716
|
+
outerWrapper.querySelectorAll("button").forEach((btn) => {
|
|
19717
|
+
btn.style.pointerEvents = "auto";
|
|
19718
|
+
btn.addEventListener("click", (e) => e.stopPropagation());
|
|
19719
|
+
});
|
|
19502
19720
|
return outerWrapper;
|
|
19503
19721
|
}
|
|
19504
19722
|
}
|
|
@@ -20229,6 +20447,7 @@ class PolygonMutationManager {
|
|
|
20229
20447
|
}
|
|
20230
20448
|
class Polydraw extends L.Control {
|
|
20231
20449
|
constructor(options) {
|
|
20450
|
+
console.log("constructor");
|
|
20232
20451
|
super(options);
|
|
20233
20452
|
__publicField(this, "map");
|
|
20234
20453
|
__publicField(this, "tracer", {});
|
|
@@ -20246,10 +20465,14 @@ class Polydraw extends L.Control {
|
|
|
20246
20465
|
__publicField(this, "_boundKeyDownHandler");
|
|
20247
20466
|
__publicField(this, "_boundKeyUpHandler");
|
|
20248
20467
|
__publicField(this, "isModifierKeyHeld", false);
|
|
20468
|
+
__publicField(this, "_boundTouchMove");
|
|
20469
|
+
__publicField(this, "_boundTouchEnd");
|
|
20470
|
+
__publicField(this, "_boundTouchStart");
|
|
20249
20471
|
/**
|
|
20250
20472
|
* Handle marker hover when modifier key is held - event handler version
|
|
20251
20473
|
*/
|
|
20252
20474
|
__publicField(this, "onMarkerHoverForEdgeDeletionEvent", (e) => {
|
|
20475
|
+
console.log("onMarkerHoverForEdgeDeletionEvent");
|
|
20253
20476
|
if (!this.isModifierKeyHeld) return;
|
|
20254
20477
|
const element = e.target;
|
|
20255
20478
|
if (element) {
|
|
@@ -20262,6 +20485,7 @@ class Polydraw extends L.Control {
|
|
|
20262
20485
|
* Handle marker leave when modifier key is held - event handler version
|
|
20263
20486
|
*/
|
|
20264
20487
|
__publicField(this, "onMarkerLeaveForEdgeDeletionEvent", (e) => {
|
|
20488
|
+
console.log("onMarkerLeaveForEdgeDeletionEvent");
|
|
20265
20489
|
const element = e.target;
|
|
20266
20490
|
if (element) {
|
|
20267
20491
|
element.style.backgroundColor = "";
|
|
@@ -20314,6 +20538,13 @@ class Polydraw extends L.Control {
|
|
|
20314
20538
|
this.polygonDrawManager = null;
|
|
20315
20539
|
}
|
|
20316
20540
|
onAdd(_map) {
|
|
20541
|
+
_map._onResize = () => {
|
|
20542
|
+
};
|
|
20543
|
+
if (L.Browser.touch && L.Browser.mobile) {
|
|
20544
|
+
_map.tap = false;
|
|
20545
|
+
}
|
|
20546
|
+
console.log("iOS touch workaround applied");
|
|
20547
|
+
console.log("onAdd");
|
|
20317
20548
|
this.map = _map;
|
|
20318
20549
|
const style = document.createElement("style");
|
|
20319
20550
|
style.innerHTML = `
|
|
@@ -20330,6 +20561,10 @@ class Polydraw extends L.Control {
|
|
|
20330
20561
|
document.head.appendChild(style);
|
|
20331
20562
|
this.setupKeyboardHandlers();
|
|
20332
20563
|
const container = L.DomUtil.create("div", "leaflet-control leaflet-bar");
|
|
20564
|
+
L.DomEvent.disableClickPropagation(container);
|
|
20565
|
+
L.DomEvent.on(container, "mousedown", L.DomEvent.stopPropagation);
|
|
20566
|
+
L.DomEvent.on(container, "touchstart", L.DomEvent.stopPropagation);
|
|
20567
|
+
L.DomEvent.on(container, "click", L.DomEvent.stopPropagation);
|
|
20333
20568
|
container.style.display = "flex";
|
|
20334
20569
|
container.style.flexDirection = "column-reverse";
|
|
20335
20570
|
this.subContainer = L.DomUtil.create("div", "sub-buttons", container);
|
|
@@ -20352,6 +20587,7 @@ class Polydraw extends L.Control {
|
|
|
20352
20587
|
this.updateActivateButtonIndicator();
|
|
20353
20588
|
};
|
|
20354
20589
|
const onDrawClick = (e) => {
|
|
20590
|
+
console.log("onDrawClick");
|
|
20355
20591
|
if (e) {
|
|
20356
20592
|
e.preventDefault();
|
|
20357
20593
|
e.stopPropagation();
|
|
@@ -20364,6 +20600,7 @@ class Polydraw extends L.Control {
|
|
|
20364
20600
|
this.polygonInformation.saveCurrentState();
|
|
20365
20601
|
};
|
|
20366
20602
|
const onSubtractClick = (e) => {
|
|
20603
|
+
console.log("onSubtractClick");
|
|
20367
20604
|
if (e) {
|
|
20368
20605
|
e.preventDefault();
|
|
20369
20606
|
e.stopPropagation();
|
|
@@ -20376,6 +20613,7 @@ class Polydraw extends L.Control {
|
|
|
20376
20613
|
this.polygonInformation.saveCurrentState();
|
|
20377
20614
|
};
|
|
20378
20615
|
const onEraseClick = (e) => {
|
|
20616
|
+
console.log("onEraseClick");
|
|
20379
20617
|
if (e) {
|
|
20380
20618
|
e.preventDefault();
|
|
20381
20619
|
e.stopPropagation();
|
|
@@ -20386,6 +20624,7 @@ class Polydraw extends L.Control {
|
|
|
20386
20624
|
this.removeAllFeatureGroups();
|
|
20387
20625
|
};
|
|
20388
20626
|
const onPointToPointClick = (e) => {
|
|
20627
|
+
console.log("onPointToPointClick");
|
|
20389
20628
|
if (e) {
|
|
20390
20629
|
e.preventDefault();
|
|
20391
20630
|
e.stopPropagation();
|
|
@@ -20435,6 +20674,7 @@ class Polydraw extends L.Control {
|
|
|
20435
20674
|
getFeatureGroups: () => this.arrayOfFeatureGroups
|
|
20436
20675
|
});
|
|
20437
20676
|
this.polygonMutationManager.on("polygonOperationComplete", (data) => {
|
|
20677
|
+
console.log("polygonOperationComplete");
|
|
20438
20678
|
this.updateActivateButtonIndicator();
|
|
20439
20679
|
this.modeManager.updateStateForMode(DrawMode.Off);
|
|
20440
20680
|
this.drawMode = DrawMode.Off;
|
|
@@ -20478,6 +20718,7 @@ class Polydraw extends L.Control {
|
|
|
20478
20718
|
return container;
|
|
20479
20719
|
}
|
|
20480
20720
|
addTo(map) {
|
|
20721
|
+
console.log("addTo");
|
|
20481
20722
|
super.addTo(map);
|
|
20482
20723
|
return this;
|
|
20483
20724
|
}
|
|
@@ -20485,6 +20726,7 @@ class Polydraw extends L.Control {
|
|
|
20485
20726
|
return this.arrayOfFeatureGroups;
|
|
20486
20727
|
}
|
|
20487
20728
|
onRemove(_map) {
|
|
20729
|
+
console.log("onRemove");
|
|
20488
20730
|
this.removeKeyboardHandlers();
|
|
20489
20731
|
if (this.tracer) {
|
|
20490
20732
|
this.map.removeLayer(this.tracer);
|
|
@@ -20492,6 +20734,7 @@ class Polydraw extends L.Control {
|
|
|
20492
20734
|
this.removeAllFeatureGroups();
|
|
20493
20735
|
}
|
|
20494
20736
|
async addPredefinedPolygon(geographicBorders, options) {
|
|
20737
|
+
console.log("addPredefinedPolygon");
|
|
20495
20738
|
if (!geographicBorders || geographicBorders.length === 0) {
|
|
20496
20739
|
throw new Error("Cannot add empty polygon array");
|
|
20497
20740
|
}
|
|
@@ -20528,6 +20771,7 @@ class Polydraw extends L.Control {
|
|
|
20528
20771
|
}
|
|
20529
20772
|
}
|
|
20530
20773
|
setDrawMode(mode) {
|
|
20774
|
+
console.log("setDrawMode");
|
|
20531
20775
|
const previousMode = this.drawMode;
|
|
20532
20776
|
this.drawMode = mode;
|
|
20533
20777
|
this.modeManager.updateStateForMode(mode);
|
|
@@ -20584,18 +20828,22 @@ class Polydraw extends L.Control {
|
|
|
20584
20828
|
}
|
|
20585
20829
|
}
|
|
20586
20830
|
getDrawMode() {
|
|
20831
|
+
console.log("getDrawMode");
|
|
20587
20832
|
return this.modeManager.getCurrentMode();
|
|
20588
20833
|
}
|
|
20589
20834
|
onDrawModeChangeListener(callback) {
|
|
20835
|
+
console.log("onDrawModeChangeListener");
|
|
20590
20836
|
this.drawModeListeners.push(callback);
|
|
20591
20837
|
}
|
|
20592
20838
|
offDrawModeChangeListener(callback) {
|
|
20839
|
+
console.log("offDrawModeChangeListener");
|
|
20593
20840
|
const index = this.drawModeListeners.indexOf(callback);
|
|
20594
20841
|
if (index > -1) {
|
|
20595
20842
|
this.drawModeListeners.splice(index, 1);
|
|
20596
20843
|
}
|
|
20597
20844
|
}
|
|
20598
20845
|
emitDrawModeChanged() {
|
|
20846
|
+
console.log("emitDrawModeChanged");
|
|
20599
20847
|
for (const cb of this.drawModeListeners) {
|
|
20600
20848
|
cb(this.modeManager.getCurrentMode());
|
|
20601
20849
|
}
|
|
@@ -20604,6 +20852,7 @@ class Polydraw extends L.Control {
|
|
|
20604
20852
|
* Update the draggable state of all existing markers when draw mode changes
|
|
20605
20853
|
*/
|
|
20606
20854
|
updateMarkerDraggableState() {
|
|
20855
|
+
console.log("updateMarkerDraggableState");
|
|
20607
20856
|
const shouldBeDraggable = this.modeManager.canPerformAction("markerDrag");
|
|
20608
20857
|
this.arrayOfFeatureGroups.forEach((featureGroup) => {
|
|
20609
20858
|
featureGroup.eachLayer((layer) => {
|
|
@@ -20625,6 +20874,7 @@ class Polydraw extends L.Control {
|
|
|
20625
20874
|
});
|
|
20626
20875
|
}
|
|
20627
20876
|
removeAllFeatureGroups() {
|
|
20877
|
+
console.log("removeAllFeatureGroups");
|
|
20628
20878
|
this.arrayOfFeatureGroups.forEach((featureGroups) => {
|
|
20629
20879
|
try {
|
|
20630
20880
|
this.map.removeLayer(featureGroups);
|
|
@@ -20637,44 +20887,44 @@ class Polydraw extends L.Control {
|
|
|
20637
20887
|
this.updateActivateButtonIndicator();
|
|
20638
20888
|
}
|
|
20639
20889
|
stopDraw() {
|
|
20890
|
+
console.log("stopDraw");
|
|
20640
20891
|
this.resetTracker();
|
|
20641
20892
|
this.drawStartedEvents(false);
|
|
20642
20893
|
}
|
|
20643
20894
|
setLeafletMapEvents(enableDragging, enableDoubleClickZoom, enableScrollWheelZoom) {
|
|
20895
|
+
console.log("setLeafletMapEvents");
|
|
20644
20896
|
enableDragging ? this.map.dragging.enable() : this.map.dragging.disable();
|
|
20645
20897
|
enableDoubleClickZoom ? this.map.doubleClickZoom.enable() : this.map.doubleClickZoom.disable();
|
|
20646
20898
|
enableScrollWheelZoom ? this.map.scrollWheelZoom.enable() : this.map.scrollWheelZoom.disable();
|
|
20647
20899
|
}
|
|
20648
20900
|
resetTracker() {
|
|
20901
|
+
console.log("resetTracker");
|
|
20649
20902
|
this.tracer.setLatLngs([]);
|
|
20650
20903
|
}
|
|
20651
20904
|
drawStartedEvents(onoff) {
|
|
20905
|
+
console.log("drawStartedEvents");
|
|
20652
20906
|
const onoroff = onoff ? "on" : "off";
|
|
20653
20907
|
this.map[onoroff]("mousemove", this.mouseMove, this);
|
|
20654
20908
|
this.map[onoroff]("mouseup", this.mouseUpLeave, this);
|
|
20655
20909
|
if (onoff) {
|
|
20656
|
-
|
|
20657
|
-
|
|
20658
|
-
|
|
20659
|
-
|
|
20660
|
-
this.map.getContainer().addEventListener("touchend", (e) => this.mouseUpLeave(e), {
|
|
20661
|
-
passive: true
|
|
20662
|
-
});
|
|
20663
|
-
} catch (error) {
|
|
20664
|
-
}
|
|
20910
|
+
this._boundTouchMove = (e) => this.mouseMove(e);
|
|
20911
|
+
this._boundTouchEnd = (e) => this.mouseUpLeave(e);
|
|
20912
|
+
this.map.getContainer().addEventListener("touchmove", this._boundTouchMove, { passive: false });
|
|
20913
|
+
this.map.getContainer().addEventListener("touchend", this._boundTouchEnd, { passive: false });
|
|
20665
20914
|
} else {
|
|
20666
|
-
|
|
20667
|
-
this.map.getContainer().removeEventListener("touchmove",
|
|
20668
|
-
|
|
20669
|
-
|
|
20670
|
-
this.map.getContainer().removeEventListener("touchend",
|
|
20671
|
-
passive: true
|
|
20672
|
-
});
|
|
20673
|
-
} catch (error) {
|
|
20915
|
+
if (this._boundTouchMove) {
|
|
20916
|
+
this.map.getContainer().removeEventListener("touchmove", this._boundTouchMove);
|
|
20917
|
+
}
|
|
20918
|
+
if (this._boundTouchEnd) {
|
|
20919
|
+
this.map.getContainer().removeEventListener("touchend", this._boundTouchEnd);
|
|
20674
20920
|
}
|
|
20675
20921
|
}
|
|
20676
20922
|
}
|
|
20677
20923
|
mouseMove(event) {
|
|
20924
|
+
console.log("mouseMove");
|
|
20925
|
+
if ("cancelable" in event && event.cancelable) {
|
|
20926
|
+
event.preventDefault();
|
|
20927
|
+
}
|
|
20678
20928
|
if ("latlng" in event && event.latlng) {
|
|
20679
20929
|
this.tracer.addLatLng(event.latlng);
|
|
20680
20930
|
} else if ("touches" in event && event.touches && event.touches.length > 0) {
|
|
@@ -20713,6 +20963,10 @@ class Polydraw extends L.Control {
|
|
|
20713
20963
|
}
|
|
20714
20964
|
}
|
|
20715
20965
|
async mouseUpLeave(event) {
|
|
20966
|
+
if ("cancelable" in event && event.cancelable) {
|
|
20967
|
+
event.preventDefault();
|
|
20968
|
+
}
|
|
20969
|
+
console.log("mouseUpLeave");
|
|
20716
20970
|
this.polygonInformation.deletePolygonInformationStorage();
|
|
20717
20971
|
const tracerGeoJSON = this.tracer.toGeoJSON();
|
|
20718
20972
|
if (!tracerGeoJSON || !tracerGeoJSON.geometry || !tracerGeoJSON.geometry.coordinates || tracerGeoJSON.geometry.coordinates.length < 3) {
|
|
@@ -20759,26 +21013,24 @@ class Polydraw extends L.Control {
|
|
|
20759
21013
|
this.polygonInformation.createPolygonInformationStorage(this.arrayOfFeatureGroups);
|
|
20760
21014
|
}
|
|
20761
21015
|
events(onoff) {
|
|
21016
|
+
console.log("events");
|
|
20762
21017
|
const onoroff = onoff ? "on" : "off";
|
|
20763
21018
|
this.map[onoroff]("mousedown", this.mouseDown, this);
|
|
20764
21019
|
this.map[onoroff]("dblclick", this.handleDoubleClick, this);
|
|
20765
21020
|
if (onoff) {
|
|
20766
|
-
|
|
20767
|
-
|
|
20768
|
-
passive: true
|
|
20769
|
-
});
|
|
20770
|
-
} catch (error) {
|
|
20771
|
-
}
|
|
21021
|
+
this._boundTouchStart = (e) => this.mouseDown(e);
|
|
21022
|
+
this.map.getContainer().addEventListener("touchstart", this._boundTouchStart, { passive: false });
|
|
20772
21023
|
} else {
|
|
20773
|
-
|
|
20774
|
-
this.map.getContainer().removeEventListener("touchstart",
|
|
20775
|
-
passive: true
|
|
20776
|
-
});
|
|
20777
|
-
} catch (error) {
|
|
21024
|
+
if (this._boundTouchStart) {
|
|
21025
|
+
this.map.getContainer().removeEventListener("touchstart", this._boundTouchStart);
|
|
20778
21026
|
}
|
|
20779
21027
|
}
|
|
20780
21028
|
}
|
|
20781
21029
|
mouseDown(event) {
|
|
21030
|
+
if ("cancelable" in event && event.cancelable) {
|
|
21031
|
+
event.preventDefault();
|
|
21032
|
+
}
|
|
21033
|
+
console.log("mouseDown");
|
|
20782
21034
|
if (this.modeManager.isInOffMode()) {
|
|
20783
21035
|
return;
|
|
20784
21036
|
}
|
|
@@ -20802,18 +21054,22 @@ class Polydraw extends L.Control {
|
|
|
20802
21054
|
this.startDraw();
|
|
20803
21055
|
}
|
|
20804
21056
|
startDraw() {
|
|
21057
|
+
console.log("startDraw");
|
|
20805
21058
|
this.drawStartedEvents(true);
|
|
20806
21059
|
}
|
|
20807
21060
|
setupKeyboardHandlers() {
|
|
21061
|
+
console.log("setupKeyboardHandlers");
|
|
20808
21062
|
this._boundKeyUpHandler = this.handleKeyUp.bind(this);
|
|
20809
21063
|
document.addEventListener("keydown", this._boundKeyDownHandler);
|
|
20810
21064
|
document.addEventListener("keyup", this._boundKeyUpHandler);
|
|
20811
21065
|
}
|
|
20812
21066
|
removeKeyboardHandlers() {
|
|
21067
|
+
console.log("removeKeyboardHandlers");
|
|
20813
21068
|
document.removeEventListener("keydown", this._boundKeyDownHandler);
|
|
20814
21069
|
document.removeEventListener("keyup", this._boundKeyUpHandler);
|
|
20815
21070
|
}
|
|
20816
21071
|
handleKeyDown(e) {
|
|
21072
|
+
console.log("handleKeyDown");
|
|
20817
21073
|
if (e.key === "Escape") {
|
|
20818
21074
|
if (this.modeManager.getCurrentMode() === DrawMode.PointToPoint) {
|
|
20819
21075
|
this.polygonDrawManager.cancelPointToPointDrawing();
|
|
@@ -20827,6 +21083,7 @@ class Polydraw extends L.Control {
|
|
|
20827
21083
|
}
|
|
20828
21084
|
}
|
|
20829
21085
|
handleKeyUp(e) {
|
|
21086
|
+
console.log("handleKeyUp");
|
|
20830
21087
|
const isModifierPressed = this.isModifierKeyPressed(e);
|
|
20831
21088
|
if (!isModifierPressed && this.isModifierKeyHeld) {
|
|
20832
21089
|
this.isModifierKeyHeld = false;
|
|
@@ -20838,6 +21095,7 @@ class Polydraw extends L.Control {
|
|
|
20838
21095
|
* Update all markers to show/hide edge deletion visual feedback
|
|
20839
21096
|
*/
|
|
20840
21097
|
updateAllMarkersForEdgeDeletion(showFeedback) {
|
|
21098
|
+
console.log("updateAllMarkersForEdgeDeletion");
|
|
20841
21099
|
this.arrayOfFeatureGroups.forEach((featureGroup) => {
|
|
20842
21100
|
featureGroup.eachLayer((layer) => {
|
|
20843
21101
|
if (layer instanceof L.Marker) {
|
|
@@ -20850,6 +21108,7 @@ class Polydraw extends L.Control {
|
|
|
20850
21108
|
* Update individual marker for edge deletion visual feedback
|
|
20851
21109
|
*/
|
|
20852
21110
|
updateMarkerForEdgeDeletion(marker, showFeedback) {
|
|
21111
|
+
console.log("updateMarkerForEdgeDeletion");
|
|
20853
21112
|
const element = marker.getElement();
|
|
20854
21113
|
if (!element) return;
|
|
20855
21114
|
if (showFeedback) {
|
|
@@ -20863,6 +21122,7 @@ class Polydraw extends L.Control {
|
|
|
20863
21122
|
}
|
|
20864
21123
|
}
|
|
20865
21124
|
handleDoubleClick(e) {
|
|
21125
|
+
console.log("handleDoubleClick");
|
|
20866
21126
|
if (this.modeManager.getCurrentMode() !== DrawMode.PointToPoint) {
|
|
20867
21127
|
return;
|
|
20868
21128
|
}
|
|
@@ -20872,6 +21132,10 @@ class Polydraw extends L.Control {
|
|
|
20872
21132
|
* Detect if modifier key is pressed (Ctrl on Windows/Linux, Cmd on Mac)
|
|
20873
21133
|
*/
|
|
20874
21134
|
isModifierKeyPressed(event) {
|
|
21135
|
+
console.log("isModifierKeyPressed");
|
|
21136
|
+
if (isTouchDevice()) {
|
|
21137
|
+
return false;
|
|
21138
|
+
}
|
|
20875
21139
|
const userAgent = navigator.userAgent.toLowerCase();
|
|
20876
21140
|
const isMac = userAgent.includes("mac");
|
|
20877
21141
|
if (isMac) {
|