leaflet-polydraw 1.0.0 → 1.1.1
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 +2 -0
- package/dist/icons/icon-bbox.svg +10 -45
- package/dist/icons/icon-cancel.svg +7 -0
- package/dist/icons/icon-collapse.svg +79 -0
- package/dist/icons/icon-confirm.svg +20 -0
- package/dist/icons/icon-double-elbows.svg +11 -0
- package/dist/icons/icon-draw.svg +55 -1
- package/dist/icons/icon-erase.svg +14 -2
- package/dist/icons/icon-p2p-draw.svg +113 -0
- package/dist/icons/icon-p2p-subtract.svg +108 -0
- package/dist/icons/icon-polydraw2.svg +60 -0
- package/dist/icons/icon-resize.svg +7 -0
- package/dist/icons/icon-rotate.svg +3 -0
- package/dist/icons/icon-simplify2.svg +12 -44
- package/dist/leaflet-polydraw.css +1 -1
- package/dist/polydraw.es.js +1543 -239
- 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/styles/polydraw.css +95 -32
- package/dist/types/buttons.d.ts +1 -1
- package/dist/types/buttons.d.ts.map +1 -1
- package/dist/types/config.d.ts +3 -0
- package/dist/types/config.d.ts.map +1 -0
- package/dist/types/enums.d.ts +2 -1
- package/dist/types/enums.d.ts.map +1 -1
- package/dist/types/index.d.ts +1 -1
- package/dist/types/managers/mode-manager.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 +10 -0
- package/dist/types/managers/polygon-interaction-manager.d.ts.map +1 -1
- package/dist/types/managers/polygon-mutation-manager.d.ts.map +1 -1
- package/dist/types/polydraw.d.ts +18 -7
- package/dist/types/polydraw.d.ts.map +1 -1
- package/dist/types/polygon.util.d.ts +2 -0
- package/dist/types/polygon.util.d.ts.map +1 -1
- package/dist/types/popup-factory.d.ts +30 -0
- package/dist/types/popup-factory.d.ts.map +1 -0
- package/dist/types/transform/polygon-transform-controller.d.ts +32 -0
- package/dist/types/transform/polygon-transform-controller.d.ts.map +1 -0
- package/dist/types/transform/transform-overlay.d.ts +40 -0
- package/dist/types/transform/transform-overlay.d.ts.map +1 -0
- package/dist/types/transform/transform-types.d.ts +44 -0
- package/dist/types/transform/transform-types.d.ts.map +1 -0
- package/dist/types/transform/transform-utils.d.ts +26 -0
- package/dist/types/transform/transform-utils.d.ts.map +1 -0
- package/dist/types/types/polydraw-interfaces.d.ts +121 -34
- package/dist/types/types/polydraw-interfaces.d.ts.map +1 -1
- package/dist/types/utils/config-merge.util.d.ts +2 -0
- package/dist/types/utils/config-merge.util.d.ts.map +1 -0
- package/dist/types/utils.d.ts +1 -1
- package/dist/types/utils.d.ts.map +1 -1
- package/package.json +7 -7
- package/dist/icons/icon-add-elbow.svg +0 -128
package/dist/polydraw.es.js
CHANGED
|
@@ -3,40 +3,6 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
|
|
|
3
3
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
4
|
var _a, _b;
|
|
5
5
|
import * as L$1 from "leaflet";
|
|
6
|
-
const mergePolygons = true;
|
|
7
|
-
const kinks$1 = false;
|
|
8
|
-
const modes = { "draw": true, "subtract": true, "deleteAll": true, "p2p": true, "attachElbow": true, "dragElbow": true, "dragPolygons": true, "edgeDeletion": true };
|
|
9
|
-
const dragPolygons = { "opacity": 0.7, "dragCursor": "move", "hoverCursor": "grab", "markerBehavior": "hide", "markerAnimationDuration": 200, "modifierSubtract": { "keys": { "windows": "ctrlKey", "mac": "metaKey", "linux": "ctrlKey" }, "hideMarkersOnDrag": true } };
|
|
10
|
-
const edgeDeletion = { "keys": { "windows": "ctrlKey", "mac": "metaKey", "linux": "ctrlKey" }, "minVertices": 3 };
|
|
11
|
-
const markers = { "deleteMarker": true, "infoMarker": true, "menuMarker": true, "coordsTitle": true, "zIndexOffset": 0, "markerIcon": { "styleClasses": ["polygon-marker"], "zIndexOffset": null }, "holeIcon": { "styleClasses": ["polygon-marker", "hole"], "zIndexOffset": null }, "markerInfoIcon": { "position": 3, "showArea": true, "showPerimeter": true, "useMetrics": true, "usePerimeterMinValue": false, "areaLabel": "Area", "perimeterLabel": "Perimeter", "values": { "min": { "metric": "50", "imperial": "100" }, "unknown": { "metric": "-", "imperial": "-" } }, "units": { "unknownUnit": "", "metric": { "onlyMetrics": true, "perimeter": { "m": "m", "km": "km" }, "area": { "m2": "m²", "km2": "km²", "daa": "daa", "ha": "ha" } }, "imperial": { "perimeter": { "feet": "ft", "yards": "yd", "miles": "mi" }, "area": { "feet2": "ft²", "yards2": "yd²", "acres": "ac", "miles2": "mi²" } } }, "styleClasses": ["polygon-marker", "info"], "zIndexOffset": 1e4 }, "markerMenuIcon": { "position": 7, "styleClasses": ["polygon-marker", "menu"], "zIndexOffset": 1e4 }, "markerDeleteIcon": { "position": 5, "styleClasses": ["polygon-marker", "delete"], "zIndexOffset": 1e4 }, "holeMarkers": { "menuMarker": false, "deleteMarker": true, "infoMarker": false }, "visualOptimization": { "sharpAngleThreshold": 30, "thresholdBoundingBox": 0.05, "thresholdDistance": 0.05, "useDistance": true, "useBoundingBox": false, "useAngles": false } };
|
|
12
|
-
const polyLineOptions = { "opacity": 1, "smoothFactor": 0, "noClip": true, "clickable": false, "weight": 2 };
|
|
13
|
-
const subtractLineOptions = { "opacity": 1, "smoothFactor": 0, "noClip": true, "clickable": false, "weight": 2 };
|
|
14
|
-
const polygonOptions = { "smoothFactor": 0.3, "noClip": true };
|
|
15
|
-
const holeOptions = { "weight": 2, "opacity": 1, "fillOpacity": 0.5 };
|
|
16
|
-
const polygonCreation = { "method": "concaveman", "simplification": { "mode": "simple", "tolerance": 1e-5, "highQuality": false } };
|
|
17
|
-
const simplification = { "simplifyTolerance": { "tolerance": 1e-4, "highQuality": false, "mutate": false }, "dynamicMode": { "fractionGuard": 0.9, "multiplier": 2 } };
|
|
18
|
-
const menuOperations = { "simplify": { "processHoles": true }, "doubleElbows": { "processHoles": true }, "bbox": { "processHoles": true } };
|
|
19
|
-
const boundingBox = { "addMidPointMarkers": true };
|
|
20
|
-
const bezier$1 = { "resolution": 1e4, "sharpness": 0.75 };
|
|
21
|
-
const colors = { "dragPolygons": { "subtract": "#D9460F" }, "p2p": { "closingMarker": "#4CAF50" }, "edgeHover": "#7a9441", "edgeDeletion": { "hover": "#D9460F" }, "polyline": "#50622b", "subtractLine": "#D9460F", "polygon": { "border": "#50622b", "fill": "#b4cd8a" }, "hole": { "border": "#aa0000", "fill": "#ffcccc" }, "styles": { "controlButton": { "backgroundColor": "#fff", "color": "#000" }, "controlButtonHover": { "backgroundColor": "#f4f4f4" }, "controlButtonActive": { "backgroundColor": "rgb(128, 218, 255)", "color": "#fff" }, "indicatorActive": { "backgroundColor": "#ffcc00" }, "p2pMarker": { "backgroundColor": "#fff", "borderColor": "#50622b" } } };
|
|
22
|
-
const defaultConfig = {
|
|
23
|
-
mergePolygons,
|
|
24
|
-
kinks: kinks$1,
|
|
25
|
-
modes,
|
|
26
|
-
dragPolygons,
|
|
27
|
-
edgeDeletion,
|
|
28
|
-
markers,
|
|
29
|
-
polyLineOptions,
|
|
30
|
-
subtractLineOptions,
|
|
31
|
-
polygonOptions,
|
|
32
|
-
holeOptions,
|
|
33
|
-
polygonCreation,
|
|
34
|
-
simplification,
|
|
35
|
-
menuOperations,
|
|
36
|
-
boundingBox,
|
|
37
|
-
bezier: bezier$1,
|
|
38
|
-
colors
|
|
39
|
-
};
|
|
40
6
|
var LeafletVersion = /* @__PURE__ */ ((LeafletVersion2) => {
|
|
41
7
|
LeafletVersion2["V1"] = "1.x";
|
|
42
8
|
LeafletVersion2["V2"] = "2.x";
|
|
@@ -50,6 +16,7 @@ var DrawMode = /* @__PURE__ */ ((DrawMode2) => {
|
|
|
50
16
|
DrawMode2[DrawMode2["AppendMarker"] = 8] = "AppendMarker";
|
|
51
17
|
DrawMode2[DrawMode2["LoadPredefined"] = 16] = "LoadPredefined";
|
|
52
18
|
DrawMode2[DrawMode2["PointToPoint"] = 32] = "PointToPoint";
|
|
19
|
+
DrawMode2[DrawMode2["PointToPointSubtract"] = 64] = "PointToPointSubtract";
|
|
53
20
|
return DrawMode2;
|
|
54
21
|
})(DrawMode || {});
|
|
55
22
|
var MarkerPosition = /* @__PURE__ */ ((MarkerPosition2) => {
|
|
@@ -64,6 +31,244 @@ var MarkerPosition = /* @__PURE__ */ ((MarkerPosition2) => {
|
|
|
64
31
|
MarkerPosition2[MarkerPosition2["Hole"] = 8] = "Hole";
|
|
65
32
|
return MarkerPosition2;
|
|
66
33
|
})(MarkerPosition || {});
|
|
34
|
+
const defaultConfig = {
|
|
35
|
+
mergePolygons: true,
|
|
36
|
+
kinks: false,
|
|
37
|
+
modes: {
|
|
38
|
+
draw: true,
|
|
39
|
+
subtract: true,
|
|
40
|
+
deleteAll: true,
|
|
41
|
+
p2p: true,
|
|
42
|
+
p2pSubtract: true,
|
|
43
|
+
attachElbow: true,
|
|
44
|
+
dragElbow: true,
|
|
45
|
+
dragPolygons: true,
|
|
46
|
+
edgeDeletion: true
|
|
47
|
+
},
|
|
48
|
+
defaultMode: DrawMode.Off,
|
|
49
|
+
dragPolygons: {
|
|
50
|
+
opacity: 0.7,
|
|
51
|
+
dragCursor: "move",
|
|
52
|
+
hoverCursor: "grab",
|
|
53
|
+
markerBehavior: "hide",
|
|
54
|
+
markerAnimationDuration: 200,
|
|
55
|
+
modifierSubtract: {
|
|
56
|
+
keys: {
|
|
57
|
+
windows: "ctrlKey",
|
|
58
|
+
mac: "metaKey",
|
|
59
|
+
linux: "ctrlKey"
|
|
60
|
+
},
|
|
61
|
+
hideMarkersOnDrag: true
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
edgeDeletion: {
|
|
65
|
+
keys: {
|
|
66
|
+
windows: "ctrlKey",
|
|
67
|
+
mac: "metaKey",
|
|
68
|
+
linux: "ctrlKey"
|
|
69
|
+
},
|
|
70
|
+
minVertices: 3
|
|
71
|
+
},
|
|
72
|
+
markers: {
|
|
73
|
+
deleteMarker: true,
|
|
74
|
+
infoMarker: true,
|
|
75
|
+
menuMarker: true,
|
|
76
|
+
coordsTitle: true,
|
|
77
|
+
zIndexOffset: 0,
|
|
78
|
+
markerIcon: {
|
|
79
|
+
styleClasses: ["polygon-marker"],
|
|
80
|
+
zIndexOffset: null
|
|
81
|
+
},
|
|
82
|
+
holeIcon: {
|
|
83
|
+
styleClasses: ["polygon-marker", "hole"],
|
|
84
|
+
zIndexOffset: null
|
|
85
|
+
},
|
|
86
|
+
markerInfoIcon: {
|
|
87
|
+
position: 3,
|
|
88
|
+
showArea: true,
|
|
89
|
+
showPerimeter: true,
|
|
90
|
+
useMetrics: true,
|
|
91
|
+
usePerimeterMinValue: false,
|
|
92
|
+
areaLabel: "Area",
|
|
93
|
+
perimeterLabel: "Perimeter",
|
|
94
|
+
values: {
|
|
95
|
+
min: {
|
|
96
|
+
metric: "50",
|
|
97
|
+
imperial: "100"
|
|
98
|
+
},
|
|
99
|
+
unknown: {
|
|
100
|
+
metric: "-",
|
|
101
|
+
imperial: "-"
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
units: {
|
|
105
|
+
unknownUnit: "",
|
|
106
|
+
metric: {
|
|
107
|
+
onlyMetrics: true,
|
|
108
|
+
perimeter: {
|
|
109
|
+
m: "m",
|
|
110
|
+
km: "km"
|
|
111
|
+
},
|
|
112
|
+
area: {
|
|
113
|
+
m2: "m²",
|
|
114
|
+
km2: "km²",
|
|
115
|
+
daa: "daa",
|
|
116
|
+
ha: "ha"
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
imperial: {
|
|
120
|
+
perimeter: {
|
|
121
|
+
feet: "ft",
|
|
122
|
+
yards: "yd",
|
|
123
|
+
miles: "mi"
|
|
124
|
+
},
|
|
125
|
+
area: {
|
|
126
|
+
feet2: "ft²",
|
|
127
|
+
yards2: "yd²",
|
|
128
|
+
acres: "ac",
|
|
129
|
+
miles2: "mi²"
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
},
|
|
133
|
+
styleClasses: ["polygon-marker", "info"],
|
|
134
|
+
zIndexOffset: 1e4
|
|
135
|
+
},
|
|
136
|
+
markerMenuIcon: {
|
|
137
|
+
position: 1,
|
|
138
|
+
styleClasses: ["polygon-marker", "menu"],
|
|
139
|
+
zIndexOffset: 1e4
|
|
140
|
+
},
|
|
141
|
+
markerDeleteIcon: {
|
|
142
|
+
position: 5,
|
|
143
|
+
styleClasses: ["polygon-marker", "delete"],
|
|
144
|
+
zIndexOffset: 1e4
|
|
145
|
+
},
|
|
146
|
+
holeMarkers: {
|
|
147
|
+
menuMarker: false,
|
|
148
|
+
deleteMarker: true,
|
|
149
|
+
infoMarker: false
|
|
150
|
+
},
|
|
151
|
+
visualOptimization: {
|
|
152
|
+
sharpAngleThreshold: 30,
|
|
153
|
+
thresholdBoundingBox: 0.05,
|
|
154
|
+
thresholdDistance: 0.05,
|
|
155
|
+
useDistance: true,
|
|
156
|
+
useBoundingBox: false,
|
|
157
|
+
useAngles: false
|
|
158
|
+
}
|
|
159
|
+
},
|
|
160
|
+
polyLineOptions: {
|
|
161
|
+
opacity: 1,
|
|
162
|
+
weight: 2
|
|
163
|
+
},
|
|
164
|
+
subtractLineOptions: {
|
|
165
|
+
opacity: 1,
|
|
166
|
+
weight: 2
|
|
167
|
+
},
|
|
168
|
+
polygonOptions: {
|
|
169
|
+
weight: 2,
|
|
170
|
+
opacity: 1,
|
|
171
|
+
fillOpacity: 0.2,
|
|
172
|
+
smoothFactor: 0.3,
|
|
173
|
+
noClip: true
|
|
174
|
+
},
|
|
175
|
+
holeOptions: {
|
|
176
|
+
weight: 2,
|
|
177
|
+
opacity: 1,
|
|
178
|
+
fillOpacity: 0.5
|
|
179
|
+
},
|
|
180
|
+
polygonCreation: {
|
|
181
|
+
method: "concaveman",
|
|
182
|
+
simplification: {
|
|
183
|
+
mode: "simple",
|
|
184
|
+
tolerance: 1e-5,
|
|
185
|
+
highQuality: false
|
|
186
|
+
}
|
|
187
|
+
},
|
|
188
|
+
simplification: {
|
|
189
|
+
simplifyTolerance: {
|
|
190
|
+
tolerance: 1e-4,
|
|
191
|
+
highQuality: false,
|
|
192
|
+
mutate: false
|
|
193
|
+
},
|
|
194
|
+
dynamicMode: {
|
|
195
|
+
fractionGuard: 0.9,
|
|
196
|
+
multiplier: 2
|
|
197
|
+
}
|
|
198
|
+
},
|
|
199
|
+
menuOperations: {
|
|
200
|
+
simplify: {
|
|
201
|
+
enabled: true,
|
|
202
|
+
processHoles: true
|
|
203
|
+
},
|
|
204
|
+
doubleElbows: {
|
|
205
|
+
enabled: true,
|
|
206
|
+
processHoles: true
|
|
207
|
+
},
|
|
208
|
+
bbox: {
|
|
209
|
+
enabled: true,
|
|
210
|
+
processHoles: true
|
|
211
|
+
},
|
|
212
|
+
bezier: {
|
|
213
|
+
enabled: true
|
|
214
|
+
},
|
|
215
|
+
scale: {
|
|
216
|
+
enabled: true
|
|
217
|
+
},
|
|
218
|
+
rotate: {
|
|
219
|
+
enabled: true
|
|
220
|
+
}
|
|
221
|
+
},
|
|
222
|
+
boundingBox: {
|
|
223
|
+
addMidPointMarkers: true
|
|
224
|
+
},
|
|
225
|
+
bezier: {
|
|
226
|
+
resolution: 1e4,
|
|
227
|
+
sharpness: 0.75
|
|
228
|
+
},
|
|
229
|
+
colors: {
|
|
230
|
+
dragPolygons: {
|
|
231
|
+
subtract: "#D9460F"
|
|
232
|
+
},
|
|
233
|
+
p2p: {
|
|
234
|
+
closingMarker: "#4CAF50"
|
|
235
|
+
},
|
|
236
|
+
edgeHover: "#7a9441",
|
|
237
|
+
edgeDeletion: {
|
|
238
|
+
hover: "#D9460F"
|
|
239
|
+
},
|
|
240
|
+
polyline: "#50622b",
|
|
241
|
+
subtractLine: "#D9460F",
|
|
242
|
+
polygon: {
|
|
243
|
+
border: "#50622b",
|
|
244
|
+
fill: "#b4cd8a"
|
|
245
|
+
},
|
|
246
|
+
hole: {
|
|
247
|
+
border: "#aa0000",
|
|
248
|
+
fill: "#ffcccc"
|
|
249
|
+
},
|
|
250
|
+
styles: {
|
|
251
|
+
controlButton: {
|
|
252
|
+
backgroundColor: "#fff",
|
|
253
|
+
color: "#000"
|
|
254
|
+
},
|
|
255
|
+
controlButtonHover: {
|
|
256
|
+
backgroundColor: "#f4f4f4"
|
|
257
|
+
},
|
|
258
|
+
controlButtonActive: {
|
|
259
|
+
backgroundColor: "rgb(128, 218, 255)",
|
|
260
|
+
color: "#fff"
|
|
261
|
+
},
|
|
262
|
+
indicatorActive: {
|
|
263
|
+
backgroundColor: "#ffcc00"
|
|
264
|
+
},
|
|
265
|
+
p2pMarker: {
|
|
266
|
+
backgroundColor: "#fff",
|
|
267
|
+
borderColor: "#50622b"
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
};
|
|
67
272
|
const EARTH_RADIUS = {
|
|
68
273
|
/**
|
|
69
274
|
* Mean radius in meters - good enough for this tool's precision requirements
|
|
@@ -17753,7 +17958,35 @@ class LeafletAdapter {
|
|
|
17753
17958
|
}
|
|
17754
17959
|
}
|
|
17755
17960
|
const leafletAdapter = new LeafletAdapter();
|
|
17756
|
-
function createButtons(container, subContainer, config, onActivateToggle, onDrawClick, onSubtractClick, onEraseClick, onPointToPointClick) {
|
|
17961
|
+
const iconPolydraw2Svg = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<!-- Generated by Pixelmator Pro 3.7 -->\n\n<svg\n width="512"\n height="512"\n viewBox="0 0 512 512"\n version="1.1"\n id="svg1"\n sodipodi:docname="icon-polydraw2.svg"\n inkscape:version="1.4.2 (ebf0e940, 2025-05-08)"\n xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"\n xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:svg="http://www.w3.org/2000/svg">\n <defs\n id="defs1" />\n <sodipodi:namedview\n id="namedview1"\n pagecolor="#ffffff"\n bordercolor="#000000"\n borderopacity="0.25"\n inkscape:showpageshadow="2"\n inkscape:pageopacity="0.0"\n inkscape:pagecheckerboard="0"\n inkscape:deskcolor="#d1d1d1"\n inkscape:zoom="2.1854905"\n inkscape:cx="327.38645"\n inkscape:cy="233.586"\n inkscape:window-width="1728"\n inkscape:window-height="1084"\n inkscape:window-x="0"\n inkscape:window-y="33"\n inkscape:window-maximized="0"\n inkscape:current-layer="svg1" />\n <path\n id="Shape"\n fill="#000000"\n fill-rule="evenodd"\n stroke="none"\n d="M 73.574318 425.686768 C 72.433441 425.875031 69.474998 425.094574 67 423.952454 C 64.525002 422.810333 61.487499 420.925354 60.25 419.763611 C 58 417.651367 58 417.651367 58 348.144531 C 58 278.637695 58 278.637695 64.15226 268.068848 C 67.536011 262.255981 73.313545 252.549988 76.991226 246.5 C 80.668915 240.450012 89.670906 225.375 96.995644 213 C 104.320389 200.625 112.662483 186.674988 115.533646 182 C 118.4048 177.325012 128.697449 160.120361 138.406174 143.767456 C 148.114914 127.414551 163.517715 101.539551 172.634628 86.267456 C 181.751526 70.995361 190.896469 56.245453 192.956696 53.489868 C 195.254944 50.415955 198.736298 47.372833 201.964966 45.615601 C 205.547699 43.665619 209.185913 42.598907 213.363663 42.27356 C 218.336411 41.886292 220.809326 42.291656 226.404907 44.411316 C 230.202591 45.849945 237.402588 49.329651 242.404907 52.144043 C 247.407211 54.958435 255.774994 59.756927 261 62.807404 C 266.225006 65.857849 274.774994 70.941406 280 74.104187 C 285.225006 77.266937 292.061249 81.349854 295.191681 83.177338 C 298.322083 85.004791 304.593597 88.698059 309.128387 91.384552 C 313.663147 94.071075 319.525085 98.281769 322.154938 100.741699 C 325.42041 103.796173 327.611938 107.003418 329.066864 110.857117 C 330.739197 115.286774 331.103424 118.018188 330.760925 123.56131 C 330.43689 128.805359 329.575104 132.072418 327.412292 136.25589 C 325.810547 139.354187 318.023956 152.826599 310.108765 166.19458 C 302.193604 179.562561 293.868591 193.52121 291.608765 197.213776 C 289.348938 200.906342 284.985504 208.106354 281.912231 213.213776 C 278.838959 218.321198 270.711334 231.950012 263.8508 243.5 C 256.990295 255.049988 247.400177 271.25 242.539444 279.5 C 237.678696 287.75 231.360229 298.325012 228.498383 303 C 225.636551 307.674988 220.191147 316.829224 216.397522 323.342712 C 212.603882 329.856201 205.890396 341.105133 201.478653 348.340332 C 193.756912 361.003967 193.215347 361.63028 186.978653 365.109344 C 183.41539 367.097076 171.620941 373.526276 160.768753 379.396423 C 149.916565 385.266602 131.916565 395.056671 120.768745 401.1521 C 109.620934 407.247559 94.90844 415.184448 88.074318 418.789642 C 81.240189 422.394806 74.715187 425.498535 73.574318 425.686768 Z M 116 376.754456 C 118.096039 376.543518 128.525452 371.474579 142 364.117859 C 154.375 357.361481 165.393753 350.964722 166.486115 349.902863 C 167.980591 348.450134 168.219772 347.57196 167.452347 346.355347 C 166.891403 345.466064 160.147644 341.00293 152.466217 336.437256 C 144.784805 331.871613 135.350006 326.168945 131.5 323.764709 C 127.650002 321.360443 116.453964 314.692322 106.619926 308.946655 C 96.785881 303.200989 87.533401 297.970886 86.058846 297.324219 C 84.417702 296.604492 82.819748 296.493042 81.938927 297.036957 C 80.957619 297.642883 80.340988 300.480957 80 305.960907 C 79.724998 310.380402 79.653214 323.273193 79.840477 334.611572 C 80.180962 355.226837 80.180962 355.226837 83.340477 358.518677 C 85.078217 360.329193 92.349998 365.252136 99.5 369.458588 C 110.254417 375.785583 113.104576 377.045837 116 376.754456 Z M 184.979996 329 C 185.880753 329 187.322388 328.4375 188.183624 327.75 C 189.044861 327.0625 191.986755 322.899994 194.721161 318.5 C 197.455582 314.100006 212.197037 289.575012 227.47995 264 C 242.762863 238.424988 257.119476 214.503387 259.383514 210.840851 C 261.647583 207.178284 265.524994 200.687805 268 196.417542 C 270.475006 192.147247 273.957123 186.14389 275.738068 183.076691 C 277.523224 180.002289 278.981506 176.072205 278.988068 174.317993 C 278.999237 171.335541 278.294434 170.703522 267.75 164.240753 C 261.5625 160.448364 253.125 155.321045 249 152.84668 C 244.875 150.372314 235.754837 144.907379 228.732956 140.702332 C 221.71109 136.497284 212.486084 130.958221 208.232956 128.39328 C 203.979828 125.828369 197.371674 121.899323 193.548157 119.662079 C 189.72464 117.424835 185.418167 115.421448 183.978195 115.210114 C 181.979828 114.916809 180.644867 115.640442 178.338669 118.267059 C 176.676895 120.159729 172.969727 125.711395 170.10054 130.604126 C 167.231339 135.496857 162.066681 144.159821 158.62352 149.855194 C 155.180359 155.550537 149.634521 164.775543 146.299438 170.355194 C 142.964355 175.934845 136.29039 187.024994 131.468384 195 C 126.646393 202.975006 120.571129 213.100006 117.967812 217.5 C 115.364487 221.899994 109.518463 231.575012 104.976639 239 C 100.434822 246.424988 94.708519 255.988464 92.251534 260.252167 C 88.991837 265.908813 87.948189 268.65741 88.390656 270.420349 C 88.845047 272.230804 92.629936 274.990234 103.491547 281.429932 C 111.463524 286.156433 124.176689 293.686981 131.743027 298.16452 C 139.309357 302.642059 149.324997 308.65036 154 311.516296 C 158.675003 314.382263 167.189499 319.488525 172.921127 322.863556 C 178.65274 326.238586 184.079239 329 184.979996 329 Z M 285.661102 134.977844 C 287.97934 134.99408 289.512512 134.179626 291.411102 131.923279 C 292.908417 130.143829 294 127.609955 294 125.913757 C 294 123.644043 293.152191 122.405426 290.25 120.435181 C 288.1875 119.034973 283.720306 116.145264 280.322876 114.01358 C 276.925446 111.881897 270.400452 107.99884 265.822876 105.384521 C 261.2453 102.770203 255.024994 98.976471 252 96.954041 C 248.975006 94.93161 244.25 92.081146 241.5 90.61969 C 238.75 89.158264 233.350006 85.931335 229.5 83.448761 C 224.476532 80.209473 221.661926 79.01474 219.531921 79.217499 C 217.432587 79.417297 215.882141 80.515015 214.234802 82.967804 C 212.798111 85.106964 212.019608 87.555267 212.202881 89.357971 C 212.456848 91.855927 213.807068 93.077637 221.5 97.770203 C 226.449997 100.789642 237.024994 107.196594 245 112.007874 C 252.975006 116.819153 264.674988 123.950684 271 127.855682 C 278.806824 132.675537 283.515167 134.962799 285.661102 134.977844 Z" />\n <path\n id="path1"\n fill="#000000"\n fill-rule="evenodd"\n stroke="none"\n d="M 479.5 119.5 C 479.5 153.5 479.5 153.5 472.5 153.761627 C 468.649994 153.905518 461.225006 154.708954 456 155.547028 C 450.774994 156.385132 443.466675 157.966583 439.759277 159.061371 C 436.05188 160.156189 430.343719 162.619598 427.074493 164.535645 C 423.805267 166.451691 419.672913 169.245789 417.891449 170.744781 C 416.110016 172.243774 412.965179 176.08078 410.902954 179.271454 C 408.507751 182.977295 406.493622 187.858795 405.326721 192.786346 C 403.980774 198.469788 403.509888 204.334198 403.537537 215.067841 C 403.560455 223.970093 404.286011 234.276245 405.403107 241.567841 C 406.408508 248.130524 408.366913 258.674988 409.755096 265 C 411.14325 271.325012 412.907196 279.200012 413.674927 282.5 C 414.442657 285.799988 416.815094 297.049988 418.946991 307.5 C 421.078888 317.950012 423.76297 332.401184 424.911591 339.613708 C 426.481873 349.47406 427 357.319122 427 371.235504 C 427 387.630524 426.716309 390.871338 424.515106 399.621765 C 423.148407 405.05481 420.216461 413.182556 417.999634 417.683472 C 415.167511 423.433655 411.734741 428.242035 406.454742 433.854706 C 401.146912 439.496948 395.939392 443.700836 388.720215 448.171234 C 383.099091 451.652039 375.575012 455.78241 372 457.349823 C 368.424988 458.917206 361.261017 461.749329 356.080017 463.643402 C 350.899017 465.537445 342.574005 467.951355 337.580017 469.007568 C 332.585999 470.063812 324 471.644897 318.5 472.521088 C 311.866943 473.57782 299.745911 474.237183 282.5 474.479462 C 268.200012 474.680359 252 474.489349 246.5 474.054932 C 241 473.620544 230.875 472.51828 224 471.605438 C 217.125 470.692596 207.424561 469.276886 202.443451 468.459412 C 197.462357 467.641907 190.037354 466.282959 185.943451 465.439453 C 181.849548 464.595978 176.25 463.281586 173.5 462.518616 C 170.75 461.755646 165.800003 460.43631 162.5 459.586731 C 159.199997 458.737183 152 456.93927 146.5 455.59137 C 141 454.243469 130.649994 451.291107 123.5 449.030579 C 116.349998 446.77002 108.587502 444.226166 106.25 443.377533 C 103.345978 442.323242 102 441.251038 102 439.992004 C 102 438.763947 105.25164 436.022705 111.75 431.772461 C 117.112503 428.265137 124.951981 423.494568 129.171066 421.171265 C 136.842117 416.947052 136.842117 416.947052 147.671066 419.885193 C 153.626984 421.50116 166.824997 424.88266 177 427.399658 C 187.175003 429.916656 200.449997 432.864655 206.5 433.950775 C 212.550003 435.036896 221.550003 436.377319 226.5 436.929504 C 231.449997 437.481689 241.350006 438.46051 248.5 439.104675 C 256.607147 439.835083 270.156616 440.060425 284.5 439.703461 C 297.763824 439.373352 311.521454 438.469299 317 437.56781 C 322.225006 436.708008 331 434.605408 336.5 432.895386 C 342 431.185333 349.424988 428.45224 353 426.821869 C 356.575012 425.191498 361.75 422.78241 364.5 421.468353 C 367.25 420.154297 372.440887 416.632446 376.035309 413.642029 C 379.923035 410.407593 383.626404 406.239136 385.176788 403.352478 C 386.610199 400.683624 388.82962 395.208862 390.108826 391.18631 C 392.043091 385.103973 392.427551 381.771362 392.392365 371.391907 C 392.368134 364.243286 391.617584 354.764648 390.63559 349.205566 C 389.692627 343.867493 388.22879 335.674988 387.382629 331 C 386.536469 326.325012 384.929169 318.225006 383.810822 313 C 382.692505 307.774994 380.661194 299 379.296814 293.5 C 377.932434 288 375.796661 278.774994 374.55069 273 C 373.304718 267.225006 371.555939 258 370.66452 252.5 C 369.773102 247 368.583893 238.419525 368.021881 233.432281 C 367.459839 228.445038 367.007843 219.445038 367.017456 213.432281 C 367.027069 207.419525 367.668945 198.633209 368.443848 193.907166 C 369.21875 189.181091 370.563477 182.881104 371.432129 179.907166 C 372.300781 176.933228 374.471405 171.682648 376.255737 168.239197 C 378.0401 164.795746 381.511963 159.235352 383.971008 155.882751 C 386.430054 152.530182 392.055054 146.895081 396.471008 143.360352 C 400.886963 139.825592 408.100006 135.196167 412.5 133.072693 C 416.899994 130.949249 424.549988 127.878998 429.5 126.249969 C 434.450012 124.620911 444.125 122.492981 451 121.521179 C 457.875 120.549408 467.100006 119.697083 471.5 119.627167 L 479.5 119.5 Z" />\n <path\n id="path2"\n fill="#B6BCC4"\n fill-rule="evenodd"\n stroke="none"\n d="M 116 375.742615 C 113.270905 375.979401 110.6278 374.942505 104 371.035126 C 99.324997 368.278992 92.867485 364.331085 89.649971 362.261993 C 86.432457 360.192871 83.16996 357.284851 82.399971 355.799683 C 81.305717 353.689026 81 347.452454 81 327.240784 C 81 306.114777 81.26738 301.027008 82.460983 299.441132 C 83.890869 297.541321 84.034538 297.562286 89.210983 300.426575 C 92.119942 302.036163 97.425003 305.010712 101 307.036682 C 104.574997 309.062622 110.100868 312.245667 113.279701 314.110107 C 116.458542 315.974548 123.533379 320.200012 129.001572 323.5 C 134.469757 326.799988 142.838348 331.745026 147.59845 334.488953 C 152.358566 337.232849 158.333725 340.837097 160.876587 342.498352 C 163.445404 344.176575 165.630447 346.4263 165.793533 347.560852 C 166.040268 349.277313 162.373489 351.662323 142.793533 362.520905 C 128.02803 370.709534 118.218613 375.55014 116 375.742615 Z" />\n <path\n id="path3"\n fill="#aaffaa"\n fill-rule="evenodd"\n stroke="none"\n d="M 185.255783 329 C 184.243942 329 179.609955 326.806396 174.958038 324.125366 C 170.306122 321.444336 152.324997 310.802734 135 300.477417 C 117.675003 290.152069 100.349998 279.633148 96.5 277.102051 C 90.249817 272.99295 89.471245 272.125092 89.231583 269 C 89.029724 266.367798 90.047935 263.640442 93.338226 258 C 95.744507 253.875 114.914024 221.924988 135.937164 187 C 156.960297 152.075012 175.408127 121.924988 176.932327 120 C 179.126877 117.228363 180.520828 116.438263 183.630585 116.203308 C 187.107788 115.940613 189.902344 117.306458 208.028793 128.128174 C 219.287949 134.850037 238.175003 146.155121 250 153.25058 C 261.825012 160.346039 273.075012 167.400116 275 168.926331 C 277.098694 170.590271 278.626709 172.762299 278.816498 174.351379 C 279.006622 175.943481 277.794708 179.496368 275.780823 183.250732 C 273.937134 186.687836 254.255646 219.779419 232.044174 256.787598 C 209.832703 293.795776 190.632736 325.183258 189.377579 326.537598 C 188.122437 327.891907 186.267624 329 185.255783 329 Z" />\n</svg>\n';
|
|
17962
|
+
const iconP2PSubtractSvg = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<!-- Generated by Pixelmator Pro 3.7 -->\n\n<svg\n width="512"\n height="512"\n viewBox="0 0 512 512"\n version="1.1"\n id="svg1"\n sodipodi:docname="icon-p2p-subtract.svg"\n inkscape:version="1.4.2 (ebf0e940, 2025-05-08)"\n xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"\n xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:svg="http://www.w3.org/2000/svg">\n <defs\n id="defs1" />\n <sodipodi:namedview\n id="namedview1"\n pagecolor="#ffffff"\n bordercolor="#000000"\n borderopacity="0.25"\n inkscape:showpageshadow="2"\n inkscape:pageopacity="0.0"\n inkscape:pagecheckerboard="0"\n inkscape:deskcolor="#d1d1d1"\n inkscape:zoom="0.57779708"\n inkscape:cx="236.24211"\n inkscape:cy="80.478081"\n inkscape:window-width="1200"\n inkscape:window-height="770"\n inkscape:window-x="218"\n inkscape:window-y="226"\n inkscape:window-maximized="0"\n inkscape:current-layer="svg1"\n showguides="true">\n <sodipodi:guide\n position="294.40467,66.478038"\n orientation="0,-1"\n id="guide1"\n inkscape:locked="false" />\n <sodipodi:guide\n position="443.95598,219.9443"\n orientation="1,0"\n id="guide2"\n inkscape:locked="false" />\n <sodipodi:guide\n position="479.19058,322.51614"\n orientation="1,0"\n id="guide3"\n inkscape:locked="false" />\n <sodipodi:guide\n position="292.83869,31.243437"\n orientation="0,-1"\n id="guide4"\n inkscape:locked="false" />\n <sodipodi:guide\n position="263.86802,466.58651"\n orientation="0,-1"\n id="guide5"\n inkscape:locked="false" />\n <sodipodi:guide\n position="261.51904,432.1349"\n orientation="0,-1"\n id="guide6"\n inkscape:locked="false" />\n <sodipodi:guide\n position="32.885628,329.56306"\n orientation="1,0"\n id="guide7"\n inkscape:locked="false" />\n </sodipodi:namedview>\n <path\n id="path2"\n fill="#000000"\n fill-rule="evenodd"\n stroke="none"\n d="m 193.81183,478.59424 c -90.05259,0.005 -55.41437,-0.20995 -62.99516,-0.88359 -3.1082,-0.2762 -27.10921,-21.64334 -46.819084,-41.47757 -19.70986,-19.83423 -38.405351,-39.29924 -41.545547,-43.25557 -3.140161,-3.95634 -6.620273,-10.71524 -7.733575,-15.01969 -1.731782,-6.69578 -1.640384,-9.15249 0.632805,-17.00722 2.629257,-9.08499 3.6462,-10.16288 97.354641,-103.18631 67.81987,-67.32409 96.74165,-95.00594 101.89931,-97.5306 4.69396,-2.29769 10.02467,-3.49792 15.30881,-3.44687 5.93187,0.0573 10.33676,1.33387 16.41655,4.7576 5.37383,3.02609 23.90609,20.08661 52.45656,48.29048 24.28094,23.98618 46.73845,47.41164 49.90564,52.05662 4.53335,6.64854 5.89358,10.35999 6.39341,17.4445 0.53601,7.59755 -0.0725,10.28802 -3.90756,17.27501 -3.19113,5.81394 -24.29994,28.16258 -70.95801,75.12564 -36.52859,36.76731 -66.37253,67.62363 -66.92611,68.17388 -19.82934,19.70981 -39.70971,38.18329 -39.48268,38.68369 z M 278.39348,341.263 c -68.04391,-67.49005 -88.70387,-86.89199 -89.81039,-86.65746 -1.10652,0.23458 -27.94601,26.11747 -59.64337,57.51756 -31.697381,31.40008 -57.438314,57.93966 -57.202104,58.97682 0.23622,1.03714 15.75768,17.2724 34.492134,36.07839 34.06266,34.19266 34.06266,34.19266 53.59952,34.19266 19.53691,0 19.53691,0 55.27489,-35.28546 19.65593,-19.40699 41.93704,-41.9313 49.51367,-50.05396 z m 60.93865,-60.02398 c -66.90002,-66.62079 -87.2881,-86.35609 -88.46817,-86.83735 -1.29064,-0.52641 -8.78712,5.68385 -18.81344,15.58544 l -16.66788,16.46053 44.40871,44.02713 c 24.42482,24.21491 44.78655,44.02712 45.24827,44.02712 0.46173,0 8.36641,-7.48416 17.56604,-16.63144 z"\n style="stroke-width:1.5931"\n sodipodi:nodetypes="csssssssscssssssccsssssssccsscsscc" />\n <path\n style="fill:#800000;fill-opacity:1;stroke:#010101;stroke-width:7.48758"\n d="m 214.60419,225.76607 35.34452,-32.835 89.30798,87.87273 -34.08219,33.77315 z"\n id="path3" />\n <path\n style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:35;stroke-dasharray:none;stroke-opacity:1"\n d="m 238.70454,480.61597 240.58456,-0.0328 0,-435.375911 L 32.679361,44.8696 32.918466,80.474658 444.02166,79.593154 443.68404,445.58764 274.55795,445.01091 Z"\n id="path7"\n sodipodi:nodetypes="ccccccccc" />\n <circle\n style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:35;stroke-dasharray:none;stroke-opacity:1"\n id="path8"\n cx="460.39642"\n cy="461.54739"\n r="39.133694" />\n <circle\n style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:35;stroke-dasharray:none;stroke-opacity:1"\n id="path8-8"\n cx="460.77478"\n cy="65.833855"\n r="39.133694" />\n <circle\n style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:35;stroke-dasharray:none;stroke-opacity:1"\n id="path8-8-0"\n cx="67.175827"\n cy="62.81522"\n r="39.133694" />\n</svg>\n';
|
|
17963
|
+
const iconDrawSvg = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<!-- Generated by Pixelmator Pro 3.7 -->\n\n<svg\n width="512"\n height="512"\n viewBox="0 0 512 512"\n version="1.1"\n id="svg1"\n sodipodi:docname="icon-draw.svg"\n inkscape:version="1.4.2 (ebf0e940, 2025-05-08)"\n xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"\n xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:svg="http://www.w3.org/2000/svg">\n <defs\n id="defs1" />\n <sodipodi:namedview\n id="namedview1"\n pagecolor="#ffffff"\n bordercolor="#000000"\n borderopacity="0.25"\n inkscape:showpageshadow="2"\n inkscape:pageopacity="0.0"\n inkscape:pagecheckerboard="0"\n inkscape:deskcolor="#d1d1d1"\n inkscape:zoom="1.4901425"\n inkscape:cx="137.2352"\n inkscape:cy="249.97609"\n inkscape:window-width="1728"\n inkscape:window-height="1056"\n inkscape:window-x="0"\n inkscape:window-y="61"\n inkscape:window-maximized="0"\n inkscape:current-layer="svg1" />\n <path\n id="Shape"\n fill="#000000"\n fill-rule="evenodd"\n stroke="none"\n d="M 73.574318 425.686768 C 72.433441 425.875031 69.474998 425.094574 67 423.952454 C 64.525002 422.810333 61.487499 420.925354 60.25 419.763611 C 58 417.651367 58 417.651367 58 348.144531 C 58 278.637695 58 278.637695 64.15226 268.068848 C 67.536011 262.255981 73.313545 252.549988 76.991226 246.5 C 80.668915 240.450012 89.670906 225.375 96.995644 213 C 104.320389 200.625 112.662483 186.674988 115.533646 182 C 118.4048 177.325012 128.697449 160.120361 138.406174 143.767456 C 148.114914 127.414551 163.517715 101.539551 172.634628 86.267456 C 181.751526 70.995361 190.896469 56.245453 192.956696 53.489868 C 195.254944 50.415955 198.736298 47.372833 201.964966 45.615601 C 205.547699 43.665619 209.185913 42.598907 213.363663 42.27356 C 218.336411 41.886292 220.809326 42.291656 226.404907 44.411316 C 230.202591 45.849945 237.402588 49.329651 242.404907 52.144043 C 247.407211 54.958435 255.774994 59.756927 261 62.807404 C 266.225006 65.857849 274.774994 70.941406 280 74.104187 C 285.225006 77.266937 292.061249 81.349854 295.191681 83.177338 C 298.322083 85.004791 304.593597 88.698059 309.128387 91.384552 C 313.663147 94.071075 319.525085 98.281769 322.154938 100.741699 C 325.42041 103.796173 327.611938 107.003418 329.066864 110.857117 C 330.739197 115.286774 331.103424 118.018188 330.760925 123.56131 C 330.43689 128.805359 329.575104 132.072418 327.412292 136.25589 C 325.810547 139.354187 318.023956 152.826599 310.108765 166.19458 C 302.193604 179.562561 293.868591 193.52121 291.608765 197.213776 C 289.348938 200.906342 284.985504 208.106354 281.912231 213.213776 C 278.838959 218.321198 270.711334 231.950012 263.8508 243.5 C 256.990295 255.049988 247.400177 271.25 242.539444 279.5 C 237.678696 287.75 231.360229 298.325012 228.498383 303 C 225.636551 307.674988 220.191147 316.829224 216.397522 323.342712 C 212.603882 329.856201 205.890396 341.105133 201.478653 348.340332 C 193.756912 361.003967 193.215347 361.63028 186.978653 365.109344 C 183.41539 367.097076 171.620941 373.526276 160.768753 379.396423 C 149.916565 385.266602 131.916565 395.056671 120.768745 401.1521 C 109.620934 407.247559 94.90844 415.184448 88.074318 418.789642 C 81.240189 422.394806 74.715187 425.498535 73.574318 425.686768 Z M 116 376.754456 C 118.096039 376.543518 128.525452 371.474579 142 364.117859 C 154.375 357.361481 165.393753 350.964722 166.486115 349.902863 C 167.980591 348.450134 168.219772 347.57196 167.452347 346.355347 C 166.891403 345.466064 160.147644 341.00293 152.466217 336.437256 C 144.784805 331.871613 135.350006 326.168945 131.5 323.764709 C 127.650002 321.360443 116.453964 314.692322 106.619926 308.946655 C 96.785881 303.200989 87.533401 297.970886 86.058846 297.324219 C 84.417702 296.604492 82.819748 296.493042 81.938927 297.036957 C 80.957619 297.642883 80.340988 300.480957 80 305.960907 C 79.724998 310.380402 79.653214 323.273193 79.840477 334.611572 C 80.180962 355.226837 80.180962 355.226837 83.340477 358.518677 C 85.078217 360.329193 92.349998 365.252136 99.5 369.458588 C 110.254417 375.785583 113.104576 377.045837 116 376.754456 Z M 184.979996 329 C 185.880753 329 187.322388 328.4375 188.183624 327.75 C 189.044861 327.0625 191.986755 322.899994 194.721161 318.5 C 197.455582 314.100006 212.197037 289.575012 227.47995 264 C 242.762863 238.424988 257.119476 214.503387 259.383514 210.840851 C 261.647583 207.178284 265.524994 200.687805 268 196.417542 C 270.475006 192.147247 273.957123 186.14389 275.738068 183.076691 C 277.523224 180.002289 278.981506 176.072205 278.988068 174.317993 C 278.999237 171.335541 278.294434 170.703522 267.75 164.240753 C 261.5625 160.448364 253.125 155.321045 249 152.84668 C 244.875 150.372314 235.754837 144.907379 228.732956 140.702332 C 221.71109 136.497284 212.486084 130.958221 208.232956 128.39328 C 203.979828 125.828369 197.371674 121.899323 193.548157 119.662079 C 189.72464 117.424835 185.418167 115.421448 183.978195 115.210114 C 181.979828 114.916809 180.644867 115.640442 178.338669 118.267059 C 176.676895 120.159729 172.969727 125.711395 170.10054 130.604126 C 167.231339 135.496857 162.066681 144.159821 158.62352 149.855194 C 155.180359 155.550537 149.634521 164.775543 146.299438 170.355194 C 142.964355 175.934845 136.29039 187.024994 131.468384 195 C 126.646393 202.975006 120.571129 213.100006 117.967812 217.5 C 115.364487 221.899994 109.518463 231.575012 104.976639 239 C 100.434822 246.424988 94.708519 255.988464 92.251534 260.252167 C 88.991837 265.908813 87.948189 268.65741 88.390656 270.420349 C 88.845047 272.230804 92.629936 274.990234 103.491547 281.429932 C 111.463524 286.156433 124.176689 293.686981 131.743027 298.16452 C 139.309357 302.642059 149.324997 308.65036 154 311.516296 C 158.675003 314.382263 167.189499 319.488525 172.921127 322.863556 C 178.65274 326.238586 184.079239 329 184.979996 329 Z M 285.661102 134.977844 C 287.97934 134.99408 289.512512 134.179626 291.411102 131.923279 C 292.908417 130.143829 294 127.609955 294 125.913757 C 294 123.644043 293.152191 122.405426 290.25 120.435181 C 288.1875 119.034973 283.720306 116.145264 280.322876 114.01358 C 276.925446 111.881897 270.400452 107.99884 265.822876 105.384521 C 261.2453 102.770203 255.024994 98.976471 252 96.954041 C 248.975006 94.93161 244.25 92.081146 241.5 90.61969 C 238.75 89.158264 233.350006 85.931335 229.5 83.448761 C 224.476532 80.209473 221.661926 79.01474 219.531921 79.217499 C 217.432587 79.417297 215.882141 80.515015 214.234802 82.967804 C 212.798111 85.106964 212.019608 87.555267 212.202881 89.357971 C 212.456848 91.855927 213.807068 93.077637 221.5 97.770203 C 226.449997 100.789642 237.024994 107.196594 245 112.007874 C 252.975006 116.819153 264.674988 123.950684 271 127.855682 C 278.806824 132.675537 283.515167 134.962799 285.661102 134.977844 Z"\n style="stroke:#000000;stroke-opacity:1;stroke-width:20;stroke-dasharray:none" />\n <path\n id="path1"\n fill="#000000"\n fill-rule="evenodd"\n stroke="none"\n d="M 479.5 119.5 C 479.5 153.5 479.5 153.5 472.5 153.761627 C 468.649994 153.905518 461.225006 154.708954 456 155.547028 C 450.774994 156.385132 443.466675 157.966583 439.759277 159.061371 C 436.05188 160.156189 430.343719 162.619598 427.074493 164.535645 C 423.805267 166.451691 419.672913 169.245789 417.891449 170.744781 C 416.110016 172.243774 412.965179 176.08078 410.902954 179.271454 C 408.507751 182.977295 406.493622 187.858795 405.326721 192.786346 C 403.980774 198.469788 403.509888 204.334198 403.537537 215.067841 C 403.560455 223.970093 404.286011 234.276245 405.403107 241.567841 C 406.408508 248.130524 408.366913 258.674988 409.755096 265 C 411.14325 271.325012 412.907196 279.200012 413.674927 282.5 C 414.442657 285.799988 416.815094 297.049988 418.946991 307.5 C 421.078888 317.950012 423.76297 332.401184 424.911591 339.613708 C 426.481873 349.47406 427 357.319122 427 371.235504 C 427 387.630524 426.716309 390.871338 424.515106 399.621765 C 423.148407 405.05481 420.216461 413.182556 417.999634 417.683472 C 415.167511 423.433655 411.734741 428.242035 406.454742 433.854706 C 401.146912 439.496948 395.939392 443.700836 388.720215 448.171234 C 383.099091 451.652039 375.575012 455.78241 372 457.349823 C 368.424988 458.917206 361.261017 461.749329 356.080017 463.643402 C 350.899017 465.537445 342.574005 467.951355 337.580017 469.007568 C 332.585999 470.063812 324 471.644897 318.5 472.521088 C 311.866943 473.57782 299.745911 474.237183 282.5 474.479462 C 268.200012 474.680359 252 474.489349 246.5 474.054932 C 241 473.620544 230.875 472.51828 224 471.605438 C 217.125 470.692596 207.424561 469.276886 202.443451 468.459412 C 197.462357 467.641907 190.037354 466.282959 185.943451 465.439453 C 181.849548 464.595978 176.25 463.281586 173.5 462.518616 C 170.75 461.755646 165.800003 460.43631 162.5 459.586731 C 159.199997 458.737183 152 456.93927 146.5 455.59137 C 141 454.243469 130.649994 451.291107 123.5 449.030579 C 116.349998 446.77002 108.587502 444.226166 106.25 443.377533 C 103.345978 442.323242 102 441.251038 102 439.992004 C 102 438.763947 105.25164 436.022705 111.75 431.772461 C 117.112503 428.265137 124.951981 423.494568 129.171066 421.171265 C 136.842117 416.947052 136.842117 416.947052 147.671066 419.885193 C 153.626984 421.50116 166.824997 424.88266 177 427.399658 C 187.175003 429.916656 200.449997 432.864655 206.5 433.950775 C 212.550003 435.036896 221.550003 436.377319 226.5 436.929504 C 231.449997 437.481689 241.350006 438.46051 248.5 439.104675 C 256.607147 439.835083 270.156616 440.060425 284.5 439.703461 C 297.763824 439.373352 311.521454 438.469299 317 437.56781 C 322.225006 436.708008 331 434.605408 336.5 432.895386 C 342 431.185333 349.424988 428.45224 353 426.821869 C 356.575012 425.191498 361.75 422.78241 364.5 421.468353 C 367.25 420.154297 372.440887 416.632446 376.035309 413.642029 C 379.923035 410.407593 383.626404 406.239136 385.176788 403.352478 C 386.610199 400.683624 388.82962 395.208862 390.108826 391.18631 C 392.043091 385.103973 392.427551 381.771362 392.392365 371.391907 C 392.368134 364.243286 391.617584 354.764648 390.63559 349.205566 C 389.692627 343.867493 388.22879 335.674988 387.382629 331 C 386.536469 326.325012 384.929169 318.225006 383.810822 313 C 382.692505 307.774994 380.661194 299 379.296814 293.5 C 377.932434 288 375.796661 278.774994 374.55069 273 C 373.304718 267.225006 371.555939 258 370.66452 252.5 C 369.773102 247 368.583893 238.419525 368.021881 233.432281 C 367.459839 228.445038 367.007843 219.445038 367.017456 213.432281 C 367.027069 207.419525 367.668945 198.633209 368.443848 193.907166 C 369.21875 189.181091 370.563477 182.881104 371.432129 179.907166 C 372.300781 176.933228 374.471405 171.682648 376.255737 168.239197 C 378.0401 164.795746 381.511963 159.235352 383.971008 155.882751 C 386.430054 152.530182 392.055054 146.895081 396.471008 143.360352 C 400.886963 139.825592 408.100006 135.196167 412.5 133.072693 C 416.899994 130.949249 424.549988 127.878998 429.5 126.249969 C 434.450012 124.620911 444.125 122.492981 451 121.521179 C 457.875 120.549408 467.100006 119.697083 471.5 119.627167 L 479.5 119.5 Z" />\n <path\n id="path2"\n fill="#B6BCC4"\n fill-rule="evenodd"\n stroke="none"\n d="M 116 375.742615 C 113.270905 375.979401 110.6278 374.942505 104 371.035126 C 99.324997 368.278992 92.867485 364.331085 89.649971 362.261993 C 86.432457 360.192871 83.16996 357.284851 82.399971 355.799683 C 81.305717 353.689026 81 347.452454 81 327.240784 C 81 306.114777 81.26738 301.027008 82.460983 299.441132 C 83.890869 297.541321 84.034538 297.562286 89.210983 300.426575 C 92.119942 302.036163 97.425003 305.010712 101 307.036682 C 104.574997 309.062622 110.100868 312.245667 113.279701 314.110107 C 116.458542 315.974548 123.533379 320.200012 129.001572 323.5 C 134.469757 326.799988 142.838348 331.745026 147.59845 334.488953 C 152.358566 337.232849 158.333725 340.837097 160.876587 342.498352 C 163.445404 344.176575 165.630447 346.4263 165.793533 347.560852 C 166.040268 349.277313 162.373489 351.662323 142.793533 362.520905 C 128.02803 370.709534 118.218613 375.55014 116 375.742615 Z" />\n</svg>\n';
|
|
17964
|
+
const iconSubtractSvg = '<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>\n';
|
|
17965
|
+
const iconP2PDrawSvg = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<!-- Generated by Pixelmator Pro 3.7 -->\n\n<svg\n width="512"\n height="512"\n viewBox="0 0 512 512"\n version="1.1"\n id="svg1"\n sodipodi:docname="icon-p2p-draw.svg"\n inkscape:version="1.4.2 (ebf0e940, 2025-05-08)"\n xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"\n xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:svg="http://www.w3.org/2000/svg">\n <defs\n id="defs1" />\n <sodipodi:namedview\n id="namedview1"\n pagecolor="#ffffff"\n bordercolor="#000000"\n borderopacity="0.25"\n inkscape:showpageshadow="2"\n inkscape:pageopacity="0.0"\n inkscape:pagecheckerboard="0"\n inkscape:deskcolor="#d1d1d1"\n inkscape:zoom="0.54892083"\n inkscape:cx="330.64878"\n inkscape:cy="521.93319"\n inkscape:window-width="1200"\n inkscape:window-height="770"\n inkscape:window-x="197"\n inkscape:window-y="106"\n inkscape:window-maximized="0"\n inkscape:current-layer="svg1"\n showguides="true">\n <sodipodi:guide\n position="294.40467,66.478038"\n orientation="0,-1"\n id="guide1"\n inkscape:locked="false" />\n <sodipodi:guide\n position="443.95598,219.9443"\n orientation="1,0"\n id="guide2"\n inkscape:locked="false" />\n <sodipodi:guide\n position="479.19058,322.51614"\n orientation="1,0"\n id="guide3"\n inkscape:locked="false" />\n <sodipodi:guide\n position="292.83869,31.243437"\n orientation="0,-1"\n id="guide4"\n inkscape:locked="false" />\n <sodipodi:guide\n position="263.86802,466.58651"\n orientation="0,-1"\n id="guide5"\n inkscape:locked="false" />\n <sodipodi:guide\n position="261.51904,432.1349"\n orientation="0,-1"\n id="guide6"\n inkscape:locked="false" />\n <sodipodi:guide\n position="32.885628,329.56306"\n orientation="1,0"\n id="guide7"\n inkscape:locked="false" />\n </sodipodi:namedview>\n <path\n style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:35;stroke-dasharray:none;stroke-opacity:1"\n d="m 155.32706,480.61597 323.96204,-0.0328 V 45.207259 L 32.679361,44.8696 32.918466,80.474658 444.02166,79.593154 443.68404,445.58764 274.55795,445.01091 Z"\n id="path7"\n sodipodi:nodetypes="ccccccccc" />\n <circle\n style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:35;stroke-dasharray:none;stroke-opacity:1"\n id="path8"\n cx="460.39642"\n cy="461.54739"\n r="39.133694" />\n <circle\n style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:35;stroke-dasharray:none;stroke-opacity:1"\n id="path8-8"\n cx="460.77478"\n cy="65.833855"\n r="39.133694" />\n <circle\n style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:35;stroke-dasharray:none;stroke-opacity:1"\n id="path8-8-0"\n cx="67.175827"\n cy="62.81522"\n r="39.133694" />\n <path\n id="path2"\n fill="#000000"\n fill-rule="evenodd"\n stroke="none"\n d="m 78.98285,469.62959 c -2.15438,0.59403 -4.66097,-0.18539 -6.41628,-1.99508 -1.75454,-1.80897 -2.51146,-4.39507 -1.93619,-6.61526 0.51947,-2.00492 2.03533,-7.53933 3.36857,-12.29873 1.33325,-4.75939 4.30224,-15.27334 6.59779,-23.36429 2.29555,-8.09095 6.15891,-21.33074 8.58529,-29.42169 2.42637,-8.09095 6.68243,-22.49895 9.45793,-32.01774 2.77548,-9.51878 6.84771,-23.53737 9.04937,-31.15238 2.20168,-7.61501 5.9929,-20.46541 8.42494,-28.55636 2.43204,-8.09095 5.73937,-19.44463 7.34962,-25.23035 1.61019,-5.78571 4.963,-13.27069 7.45058,-16.63326 3.19549,-4.31937 8.82764,-8.13446 19.19001,-12.99886 8.06689,-3.78683 22.22096,-10.28684 31.45345,-14.44449 9.23249,-4.15765 20.18557,-9.15989 24.34021,-11.11606 4.15463,-1.95616 10.95307,-5.04935 15.10771,-6.87384 4.15464,-1.82444 8.50009,-4.18148 9.65667,-5.23786 1.67549,-1.53041 1.53724,-3.40502 -0.68062,-9.22612 -2.27058,-5.95966 -2.43594,-8.49812 -0.89757,-13.77907 1.22082,-4.19103 5.93592,-10.61436 13.37263,-18.21733 6.77176,-6.92313 13.88209,-12.5016 17.32193,-13.59009 4.56226,-1.44363 7.10301,-1.27942 11.64815,0.75263 3.42626,1.5319 23.38864,20.75839 48.61827,46.82593 23.54283,24.3248 45.07136,47.06101 47.84109,50.52486 3.87236,4.84285 5.0359,8.02217 5.0359,13.76037 0,6.66353 -0.98839,8.54701 -9.23249,17.59373 -5.07785,5.57218 -11.80914,12.26634 -14.95838,14.87589 -4.16093,3.44791 -7.61435,4.74461 -12.63592,4.74461 -3.8005,0 -8.65254,-1.25835 -10.78224,-2.79631 -2.1797,-1.57404 -4.50585,-2.14145 -5.3218,-1.29801 -0.79727,0.82403 -5.18683,10.45458 -9.75461,21.4012 -4.56774,10.94662 -11.46849,27.28897 -15.33492,36.3164 -3.86636,9.02739 -10.0263,22.88636 -13.68865,30.79773 -4.61767,9.97496 -8.2174,15.36144 -11.7432,17.57213 -2.79644,1.75334 -10.87912,5.15636 -17.96148,7.56231 -7.0824,2.40588 -20.43095,6.74835 -29.66344,9.64992 -9.2325,2.90152 -25.66143,8.03285 -36.50872,11.40295 -10.8473,3.37012 -31.2427,9.76063 -45.32314,14.20118 -14.08045,4.4406 -32.77692,10.28616 -41.54781,12.9901 -8.77088,2.70399 -17.53807,5.35501 -19.48265,5.89124 z m 33.10612,-25.66048 c 3.12446,-0.52416 14.55766,-3.75462 25.40714,-7.17876 10.84946,-3.4242 33.51103,-10.53042 50.35905,-15.79168 16.84799,-5.2612 39.69735,-12.37246 50.77636,-15.80282 14.11491,-4.3703 21.4678,-7.59596 24.56816,-10.77783 2.43353,-2.49749 8.0037,-13.10782 12.3782,-23.57846 4.37444,-10.47065 10.39747,-24.87865 13.3844,-32.01773 2.98694,-7.13909 8.32653,-19.60006 11.86571,-27.69101 3.53919,-8.09095 6.70998,-17.0473 7.04619,-19.90292 0.55531,-4.71704 -2.16136,-8.0423 -29.69233,-36.34445 -16.66695,-17.1338 -31.77968,-31.39614 -33.58378,-31.69408 -1.80414,-0.29788 -24.6359,9.2685 -50.73726,21.25867 -26.10136,11.99017 -49.09048,23.38251 -51.08698,25.31628 -1.99652,1.93377 -4.8623,7.74509 -6.36841,12.91403 -1.50609,5.16898 -4.69492,16.21648 -7.08629,24.55002 -2.39131,8.33358 -6.53304,22.55059 -9.20379,31.59346 -2.67075,9.04286 -9.07606,30.84953 -14.23398,48.45926 -5.15796,17.60974 -10.02791,34.72173 -10.82216,38.02655 -0.79426,3.30483 -1.1287,6.33395 -0.7432,6.73146 0.38545,0.39738 3.17643,-1.23918 6.20211,-3.63684 3.02568,-2.39771 17.96511,-17.53251 33.19873,-33.63296 15.23362,-16.1004 31.64089,-33.57371 36.46062,-38.82946 8.52144,-9.29247 8.71621,-9.73111 7.06247,-15.9062 -1.16333,-4.34377 -1.14253,-8.48706 0.0656,-13.11331 1.09469,-4.19134 4.27547,-9.10021 8.36474,-12.90922 3.64809,-3.39805 9.2643,-6.66174 12.56077,-7.29928 4.51031,-0.87242 7.90041,-0.1587 13.9207,2.93089 4.84417,2.48596 9.2219,6.36014 11.18725,9.90054 1.77588,3.19904 3.29934,9.20131 3.38545,13.33846 0.0891,4.28531 -1.16789,10.05847 -2.92143,13.41647 -1.69287,3.24193 -6.10927,7.65094 -9.81417,9.79783 -5.66863,3.2847 -8.24032,3.72914 -16.22634,2.80428 -9.49006,-1.09911 -9.49006,-1.09911 -49.7773,40.47775 -22.15799,22.86729 -40.57747,42.46953 -40.93217,43.56045 -0.43839,1.34819 1.17468,1.67829 5.03591,1.03061 z m 90.33008,-98.22453 c 3.35455,0 6.05979,-1.50174 8.52436,-4.73208 2.60114,-3.40941 3.33739,-6.13886 2.63399,-9.76503 -0.53698,-2.76815 -2.29563,-6.0656 -3.90813,-7.32768 -1.61249,-1.26211 -5.13852,-2.31954 -7.83556,-2.34981 -2.69703,-0.0303 -6.28515,1.23389 -7.97352,2.80925 -1.80844,1.68737 -3.06977,5.24293 -3.06977,8.65344 0,3.48156 1.33823,7.16888 3.35727,9.25053 1.84652,1.90378 5.56862,3.46138 8.27136,3.46138 z m 133.61012,-53.65133 c 1.97597,0 7.95481,-4.72004 14.17476,-11.19037 10.06607,-10.47129 10.6202,-11.45446 8.62363,-15.30071 -1.17346,-2.26069 -22.06639,-24.65026 -46.42867,-49.7546 -28.88352,-29.76325 -45.48253,-45.6442 -47.70791,-45.6442 -1.91767,0 -7.85057,4.5222 -13.54224,10.32229 -7.35863,7.49881 -9.99677,11.39096 -9.64468,14.22899 0.30251,2.43813 17.51825,21.46819 45.79618,50.62263 29.62007,30.53813 46.49498,46.71597 48.72893,46.71597 z"\n style="stroke:#010101;stroke-width:17.0446;stroke-dasharray:none;stroke-opacity:1" />\n <path\n style="fill:#008000;fill-opacity:1;stroke:none;stroke-width:18.6862;stroke-dasharray:none;stroke-opacity:1"\n d="m 243.54683,189.37604 16.45863,-15.44233 96.74466,96.71773 -16.45865,16.25509 z"\n id="path3" />\n <circle\n style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:35;stroke-dasharray:none;stroke-opacity:1"\n id="path9"\n cx="201.17783"\n cy="332.21527"\n r="13.593097" />\n</svg>\n';
|
|
17966
|
+
const iconEraseSvg = '<?xml version="1.0" encoding="utf-8"?>\n<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\n viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">\n<style type="text/css">\n .st0{fill:#000000}\n .st1{fill:#333333;fill-opacity:0;}\n</style>\n<title>trash</title>\n<rect class="st1" width="48" height="48"/>\n<polygon class="st0" points="26.6,10 26.6,7.8 21.4,7.8 21.4,10 12.6,10 12.6,12.8 35.4,12.8 35.4,10 "/>\n<path class="st0" d="M35.4,15.4H12.6v4.3h1.8V37c0,1.1,0.9,2,2,2h15.2c1.1,0,2-0.9,2-2V19.7h1.8V15.4z M19.7,34.2c0,0.5-0.4,1-1,1\n c-0.5,0-1-0.4-1-1V22.6c0-0.5,0.4-1,1-1c0.5,0,1,0.4,1,1V34.2z M25.3,33.8c0,0.7-0.6,1.3-1.3,1.3c-0.7,0-1.3-0.6-1.3-1.3V23\n 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\n c0.5,0,1,0.4,1,1V34.2z"/>\n</svg>\n';
|
|
17967
|
+
const iconCollapseSvg = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<!-- Generated by Pixelmator Pro 3.7 -->\n\n<svg\n width="512"\n height="512"\n viewBox="0 0 512 512"\n version="1.1"\n id="svg1"\n sodipodi:docname="icon-collapse.svg"\n inkscape:version="1.4.2 (ebf0e940, 2025-05-08)"\n xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"\n xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:svg="http://www.w3.org/2000/svg">\n <defs\n id="defs1" />\n <sodipodi:namedview\n id="namedview1"\n pagecolor="#ffffff"\n bordercolor="#000000"\n borderopacity="0.25"\n inkscape:showpageshadow="2"\n inkscape:pageopacity="0.0"\n inkscape:pagecheckerboard="0"\n inkscape:deskcolor="#d1d1d1"\n inkscape:zoom="3.390154"\n inkscape:cx="264.14729"\n inkscape:cy="179.04791"\n inkscape:window-width="1352"\n inkscape:window-height="797"\n inkscape:window-x="66"\n inkscape:window-y="34"\n inkscape:window-maximized="0"\n inkscape:current-layer="svg1"\n showguides="true">\n <sodipodi:guide\n position="166.90161,256"\n orientation="0,1"\n id="guide2"\n inkscape:locked="false"\n inkscape:label=""\n inkscape:color="rgb(0,134,229)" />\n <sodipodi:guide\n position="256,314.14084"\n orientation="-1,0"\n id="guide3"\n inkscape:locked="false"\n inkscape:label=""\n inkscape:color="rgb(0,134,229)" />\n <sodipodi:guide\n position="299.13272,431.6881"\n orientation="0,-1"\n id="guide4"\n inkscape:locked="false" />\n <sodipodi:guide\n position="80,297.83494"\n orientation="-1,0"\n id="guide5"\n inkscape:locked="false"\n inkscape:label=""\n inkscape:color="rgb(0,134,229)" />\n <sodipodi:guide\n position="432,400.26171"\n orientation="-1,0"\n id="guide6"\n inkscape:locked="false"\n inkscape:label=""\n inkscape:color="rgb(0,134,229)" />\n </sodipodi:namedview>\n <path\n style="fill:none;stroke:#000000;stroke-width:25;stroke-dasharray:none;stroke-opacity:1"\n d="M 80.032872,292.14907 255.78789,117.55799 431.54291,292.14907 v 0 0"\n id="path6" />\n <path\n style="fill:none;stroke:#000000;stroke-width:25;stroke-dasharray:none;stroke-opacity:1"\n d="M 80.104821,394.53856 255.85984,219.94748 431.61486,394.53856 v 0 0"\n id="path6-5" />\n</svg>\n';
|
|
17968
|
+
const sanitizeSvg = (svg) => svg.replace(/<\?xml[^>]*\?>\s*/g, "").replace(/<!--[\s\S]*?-->/g, "").trim();
|
|
17969
|
+
const icons = {
|
|
17970
|
+
activate: sanitizeSvg(iconPolydraw2Svg),
|
|
17971
|
+
draw: sanitizeSvg(iconDrawSvg),
|
|
17972
|
+
subtract: sanitizeSvg(iconSubtractSvg),
|
|
17973
|
+
p2p: sanitizeSvg(iconP2PDrawSvg),
|
|
17974
|
+
p2pSubtract: sanitizeSvg(iconP2PSubtractSvg),
|
|
17975
|
+
erase: sanitizeSvg(iconEraseSvg),
|
|
17976
|
+
collapse: sanitizeSvg(iconCollapseSvg)
|
|
17977
|
+
};
|
|
17978
|
+
const setButtonIcon = (button, svgMarkup) => {
|
|
17979
|
+
button.innerHTML = svgMarkup;
|
|
17980
|
+
const svgElement = button.querySelector("svg");
|
|
17981
|
+
if (!svgElement) return;
|
|
17982
|
+
svgElement.setAttribute("width", "24");
|
|
17983
|
+
svgElement.setAttribute("height", "24");
|
|
17984
|
+
svgElement.style.pointerEvents = "none";
|
|
17985
|
+
svgElement.querySelectorAll("*").forEach((el) => {
|
|
17986
|
+
el.style.pointerEvents = "none";
|
|
17987
|
+
});
|
|
17988
|
+
};
|
|
17989
|
+
function createButtons(container, subContainer, config, onActivateToggle, onDrawClick, onSubtractClick, onEraseClick, onPointToPointClick, onPointToPointSubtractClick) {
|
|
17757
17990
|
const activate = leafletAdapter.domUtil.create(
|
|
17758
17991
|
"a",
|
|
17759
17992
|
"icon-activate",
|
|
@@ -17761,7 +17994,9 @@ function createButtons(container, subContainer, config, onActivateToggle, onDraw
|
|
|
17761
17994
|
);
|
|
17762
17995
|
activate.href = "#";
|
|
17763
17996
|
activate.title = "Activate";
|
|
17764
|
-
activate
|
|
17997
|
+
setButtonIcon(activate, icons.activate);
|
|
17998
|
+
activate.dataset.activeIcon = icons.activate;
|
|
17999
|
+
activate.dataset.collapsedIcon = icons.collapse;
|
|
17765
18000
|
L$1.DomEvent.on(activate, "mousedown", L$1.DomEvent.stopPropagation);
|
|
17766
18001
|
L$1.DomEvent.on(activate, "touchstart", L$1.DomEvent.stopPropagation);
|
|
17767
18002
|
L$1.DomEvent.on(activate, "click", L$1.DomEvent.stop).on(activate, "click", onActivateToggle);
|
|
@@ -17769,10 +18004,12 @@ function createButtons(container, subContainer, config, onActivateToggle, onDraw
|
|
|
17769
18004
|
const draw = leafletAdapter.domUtil.create("a", "icon-draw", subContainer);
|
|
17770
18005
|
draw.href = "#";
|
|
17771
18006
|
draw.title = "Draw";
|
|
17772
|
-
draw
|
|
18007
|
+
setButtonIcon(draw, icons.draw);
|
|
17773
18008
|
L$1.DomEvent.on(draw, "mousedown", L$1.DomEvent.stopPropagation);
|
|
17774
18009
|
L$1.DomEvent.on(draw, "touchstart", L$1.DomEvent.stopPropagation);
|
|
17775
|
-
L$1.DomEvent.on(draw, "click", L$1.DomEvent.
|
|
18010
|
+
L$1.DomEvent.on(draw, "click", L$1.DomEvent.stopPropagation);
|
|
18011
|
+
L$1.DomEvent.on(draw, "click", L$1.DomEvent.stop);
|
|
18012
|
+
L$1.DomEvent.on(draw, "click", onDrawClick);
|
|
17776
18013
|
}
|
|
17777
18014
|
if (config.modes.subtract) {
|
|
17778
18015
|
const subtract = leafletAdapter.domUtil.create(
|
|
@@ -17782,19 +18019,38 @@ function createButtons(container, subContainer, config, onActivateToggle, onDraw
|
|
|
17782
18019
|
);
|
|
17783
18020
|
subtract.href = "#";
|
|
17784
18021
|
subtract.title = "Subtract";
|
|
17785
|
-
subtract
|
|
18022
|
+
setButtonIcon(subtract, icons.subtract);
|
|
17786
18023
|
L$1.DomEvent.on(subtract, "mousedown", L$1.DomEvent.stopPropagation);
|
|
17787
18024
|
L$1.DomEvent.on(subtract, "touchstart", L$1.DomEvent.stopPropagation);
|
|
17788
|
-
L$1.DomEvent.on(subtract, "click", L$1.DomEvent.
|
|
18025
|
+
L$1.DomEvent.on(subtract, "click", L$1.DomEvent.stopPropagation);
|
|
18026
|
+
L$1.DomEvent.on(subtract, "click", L$1.DomEvent.stop);
|
|
18027
|
+
L$1.DomEvent.on(subtract, "click", onSubtractClick);
|
|
17789
18028
|
}
|
|
17790
18029
|
if (config.modes.p2p) {
|
|
17791
18030
|
const p2p = leafletAdapter.domUtil.create("a", "icon-p2p", subContainer);
|
|
17792
18031
|
p2p.href = "#";
|
|
17793
18032
|
p2p.title = "Point to Point";
|
|
17794
|
-
p2p
|
|
18033
|
+
setButtonIcon(p2p, icons.p2p);
|
|
17795
18034
|
L$1.DomEvent.on(p2p, "mousedown", L$1.DomEvent.stopPropagation);
|
|
17796
18035
|
L$1.DomEvent.on(p2p, "touchstart", L$1.DomEvent.stopPropagation);
|
|
17797
|
-
L$1.DomEvent.on(p2p, "click", L$1.DomEvent.
|
|
18036
|
+
L$1.DomEvent.on(p2p, "click", L$1.DomEvent.stopPropagation);
|
|
18037
|
+
L$1.DomEvent.on(p2p, "click", L$1.DomEvent.stop);
|
|
18038
|
+
L$1.DomEvent.on(p2p, "click", onPointToPointClick);
|
|
18039
|
+
}
|
|
18040
|
+
if (config.modes.p2pSubtract) {
|
|
18041
|
+
const p2pSubtract = leafletAdapter.domUtil.create(
|
|
18042
|
+
"a",
|
|
18043
|
+
"icon-p2p-subtract",
|
|
18044
|
+
subContainer
|
|
18045
|
+
);
|
|
18046
|
+
p2pSubtract.href = "#";
|
|
18047
|
+
p2pSubtract.title = "Point to Point Subtract";
|
|
18048
|
+
setButtonIcon(p2pSubtract, icons.p2pSubtract);
|
|
18049
|
+
L$1.DomEvent.on(p2pSubtract, "mousedown", L$1.DomEvent.stopPropagation);
|
|
18050
|
+
L$1.DomEvent.on(p2pSubtract, "touchstart", L$1.DomEvent.stopPropagation);
|
|
18051
|
+
L$1.DomEvent.on(p2pSubtract, "click", L$1.DomEvent.stopPropagation);
|
|
18052
|
+
L$1.DomEvent.on(p2pSubtract, "click", L$1.DomEvent.stop);
|
|
18053
|
+
L$1.DomEvent.on(p2pSubtract, "click", onPointToPointSubtractClick);
|
|
17798
18054
|
}
|
|
17799
18055
|
if (config.modes.deleteAll) {
|
|
17800
18056
|
const erase = leafletAdapter.domUtil.create(
|
|
@@ -17804,25 +18060,12 @@ function createButtons(container, subContainer, config, onActivateToggle, onDraw
|
|
|
17804
18060
|
);
|
|
17805
18061
|
erase.href = "#";
|
|
17806
18062
|
erase.title = "Erase All";
|
|
17807
|
-
erase
|
|
17808
|
-
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
17809
|
-
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
17810
|
-
viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
|
|
17811
|
-
<style type="text/css">
|
|
17812
|
-
.st0{fill:#000000}
|
|
17813
|
-
.st1{fill:#333333;fill-opacity:0;}
|
|
17814
|
-
</style>
|
|
17815
|
-
<title>trash</title>
|
|
17816
|
-
<rect class="st1" width="48" height="48"/>
|
|
17817
|
-
<polygon class="st0" points="26.6,10 26.6,7.8 21.4,7.8 21.4,10 12.6,10 12.6,12.8 35.4,12.8 35.4,10 "/>
|
|
17818
|
-
<path class="st0" d="M35.4,15.4H12.6v4.3h1.8V37c0,1.1,0.9,2,2,2h15.2c1.1,0,2-0.9,2-2V19.7h1.8V15.4z M19.7,34.2c0,0.5-0.4,1-1,1
|
|
17819
|
-
c-0.5,0-1-0.4-1-1V22.6c0-0.5,0.4-1,1-1c0.5,0,1,0.4,1,1V34.2z M25.3,33.8c0,0.7-0.6,1.3-1.3,1.3c-0.7,0-1.3-0.6-1.3-1.3V23
|
|
17820
|
-
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
|
|
17821
|
-
c0.5,0,1,0.4,1,1V34.2z"/>
|
|
17822
|
-
</svg>`;
|
|
18063
|
+
setButtonIcon(erase, icons.erase);
|
|
17823
18064
|
L$1.DomEvent.on(erase, "mousedown", L$1.DomEvent.stopPropagation);
|
|
17824
18065
|
L$1.DomEvent.on(erase, "touchstart", L$1.DomEvent.stopPropagation);
|
|
17825
|
-
L$1.DomEvent.on(erase, "click", L$1.DomEvent.
|
|
18066
|
+
L$1.DomEvent.on(erase, "click", L$1.DomEvent.stopPropagation);
|
|
18067
|
+
L$1.DomEvent.on(erase, "click", L$1.DomEvent.stop);
|
|
18068
|
+
L$1.DomEvent.on(erase, "click", onEraseClick);
|
|
17826
18069
|
}
|
|
17827
18070
|
}
|
|
17828
18071
|
class PolygonUtil {
|
|
@@ -17938,6 +18181,60 @@ class PolygonUtil {
|
|
|
17938
18181
|
lng: centerOfMass2.geometry.coordinates[0]
|
|
17939
18182
|
};
|
|
17940
18183
|
}
|
|
18184
|
+
static getCenterOfPolygonByIndexWithOffsetFromCenterOfMass(polygon2, index) {
|
|
18185
|
+
const centerOfMass2 = this.turfHelper.getCenterOfMass(polygon2);
|
|
18186
|
+
const centerLatLng = {
|
|
18187
|
+
lat: centerOfMass2.geometry.coordinates[1],
|
|
18188
|
+
lng: centerOfMass2.geometry.coordinates[0]
|
|
18189
|
+
};
|
|
18190
|
+
const centerOfPolygonMarker = this.getPolygonLatLngAtIndex(polygon2, index) ?? centerLatLng;
|
|
18191
|
+
const offset = {
|
|
18192
|
+
lat: centerOfPolygonMarker.lat - centerLatLng.lat,
|
|
18193
|
+
lng: centerOfPolygonMarker.lng - centerLatLng.lng
|
|
18194
|
+
};
|
|
18195
|
+
const offsetFraction = 0.5;
|
|
18196
|
+
const adjustedLat = centerLatLng.lat + offset.lat * offsetFraction;
|
|
18197
|
+
const adjustedLng = centerLatLng.lng + offset.lng * offsetFraction;
|
|
18198
|
+
const newCenterOfMass = {
|
|
18199
|
+
geometry: {
|
|
18200
|
+
coordinates: [adjustedLng, adjustedLat]
|
|
18201
|
+
}
|
|
18202
|
+
};
|
|
18203
|
+
return {
|
|
18204
|
+
lat: newCenterOfMass.geometry.coordinates[1],
|
|
18205
|
+
lng: newCenterOfMass.geometry.coordinates[0]
|
|
18206
|
+
};
|
|
18207
|
+
}
|
|
18208
|
+
static getPolygonLatLngAtIndex(polygon2, index) {
|
|
18209
|
+
const geometry = polygon2.geometry;
|
|
18210
|
+
if (!geometry) {
|
|
18211
|
+
return null;
|
|
18212
|
+
}
|
|
18213
|
+
let coordinates;
|
|
18214
|
+
if (geometry.type === "Polygon") {
|
|
18215
|
+
coordinates = geometry.coordinates[0];
|
|
18216
|
+
} else if (geometry.type === "MultiPolygon") {
|
|
18217
|
+
coordinates = geometry.coordinates[0][0];
|
|
18218
|
+
} else {
|
|
18219
|
+
return null;
|
|
18220
|
+
}
|
|
18221
|
+
if (!coordinates || coordinates.length === 0) {
|
|
18222
|
+
return null;
|
|
18223
|
+
}
|
|
18224
|
+
if (coordinates.length > 1) {
|
|
18225
|
+
const first = coordinates[0];
|
|
18226
|
+
const last = coordinates[coordinates.length - 1];
|
|
18227
|
+
if (first[0] === last[0] && first[1] === last[1]) {
|
|
18228
|
+
coordinates = coordinates.slice(0, coordinates.length - 1);
|
|
18229
|
+
}
|
|
18230
|
+
}
|
|
18231
|
+
if (coordinates.length === 0) {
|
|
18232
|
+
return null;
|
|
18233
|
+
}
|
|
18234
|
+
const normalizedIndex = (index % coordinates.length + coordinates.length) % coordinates.length;
|
|
18235
|
+
const selected = coordinates[normalizedIndex];
|
|
18236
|
+
return { lat: selected[1], lng: selected[0] };
|
|
18237
|
+
}
|
|
17941
18238
|
}
|
|
17942
18239
|
__publicField(PolygonUtil, "turfHelper", new TurfHelper(defaultConfig));
|
|
17943
18240
|
class PolygonInfo {
|
|
@@ -18246,6 +18543,7 @@ class ModeManager {
|
|
|
18246
18543
|
this.setDrawingModeState();
|
|
18247
18544
|
break;
|
|
18248
18545
|
case DrawMode.PointToPoint:
|
|
18546
|
+
case DrawMode.PointToPointSubtract:
|
|
18249
18547
|
this.setPointToPointModeState();
|
|
18250
18548
|
break;
|
|
18251
18549
|
}
|
|
@@ -18538,7 +18836,7 @@ class PolygonDrawManager {
|
|
|
18538
18836
|
* Handle double-click to complete point-to-point polygon
|
|
18539
18837
|
*/
|
|
18540
18838
|
handleDoubleClick(e) {
|
|
18541
|
-
if (this.modeManager.getCurrentMode() !== DrawMode.PointToPoint) {
|
|
18839
|
+
if (this.modeManager.getCurrentMode() !== DrawMode.PointToPoint && this.modeManager.getCurrentMode() !== DrawMode.PointToPointSubtract) {
|
|
18542
18840
|
return;
|
|
18543
18841
|
}
|
|
18544
18842
|
if (this.p2pMarkers.length >= 3) {
|
|
@@ -18549,7 +18847,7 @@ class PolygonDrawManager {
|
|
|
18549
18847
|
* Handle double-tap to complete point-to-point polygon (touch devices)
|
|
18550
18848
|
*/
|
|
18551
18849
|
handleDoubleTap(_e) {
|
|
18552
|
-
if (this.modeManager.getCurrentMode() !== DrawMode.PointToPoint) {
|
|
18850
|
+
if (this.modeManager.getCurrentMode() !== DrawMode.PointToPoint && this.modeManager.getCurrentMode() !== DrawMode.PointToPointSubtract) {
|
|
18553
18851
|
return;
|
|
18554
18852
|
}
|
|
18555
18853
|
if (this.p2pMarkers.length >= 3) {
|
|
@@ -18577,7 +18875,7 @@ class PolygonDrawManager {
|
|
|
18577
18875
|
this.resetTracer();
|
|
18578
18876
|
this.eventManager.emit("polydraw:polygon:created", {
|
|
18579
18877
|
polygon: geoPos,
|
|
18580
|
-
mode:
|
|
18878
|
+
mode: this.modeManager.getCurrentMode(),
|
|
18581
18879
|
isPointToPoint: true
|
|
18582
18880
|
});
|
|
18583
18881
|
} catch (error) {
|
|
@@ -18628,6 +18926,7 @@ class PolygonDrawManager {
|
|
|
18628
18926
|
if (this.isTouchDevice()) {
|
|
18629
18927
|
tolerance *= 5;
|
|
18630
18928
|
}
|
|
18929
|
+
tolerance *= 3;
|
|
18631
18930
|
const latDiff = Math.abs(clickLatLng.lat - firstPoint.lat);
|
|
18632
18931
|
const lngDiff = Math.abs(clickLatLng.lng - firstPoint.lng);
|
|
18633
18932
|
const isClicking = latDiff < tolerance && lngDiff < tolerance;
|
|
@@ -18647,8 +18946,10 @@ class PolygonDrawManager {
|
|
|
18647
18946
|
this.tracer.setLatLngs(latlngs);
|
|
18648
18947
|
if (this.p2pMarkers.length >= 2) {
|
|
18649
18948
|
try {
|
|
18949
|
+
const currentMode = this.modeManager.getCurrentMode();
|
|
18950
|
+
const lineColor = currentMode === DrawMode.PointToPointSubtract ? this.config.colors.subtractLine : this.config.colors.polyline;
|
|
18650
18951
|
this.tracer.setStyle({
|
|
18651
|
-
color:
|
|
18952
|
+
color: lineColor,
|
|
18652
18953
|
dashArray: "5, 5"
|
|
18653
18954
|
});
|
|
18654
18955
|
} catch (error) {
|
|
@@ -18686,7 +18987,8 @@ class PolygonDrawManager {
|
|
|
18686
18987
|
* Check if currently in point-to-point drawing mode
|
|
18687
18988
|
*/
|
|
18688
18989
|
isInPointToPointMode() {
|
|
18689
|
-
|
|
18990
|
+
const mode = this.modeManager.getCurrentMode();
|
|
18991
|
+
return mode === DrawMode.PointToPoint || mode === DrawMode.PointToPointSubtract;
|
|
18690
18992
|
}
|
|
18691
18993
|
/**
|
|
18692
18994
|
* Get current tracer points count
|
|
@@ -19107,6 +19409,850 @@ class IconFactory {
|
|
|
19107
19409
|
return leafletAdapter.createDivIcon({ className: classes });
|
|
19108
19410
|
}
|
|
19109
19411
|
}
|
|
19412
|
+
var TransformHandleType = /* @__PURE__ */ ((TransformHandleType2) => {
|
|
19413
|
+
TransformHandleType2["TopLeft"] = "top-left";
|
|
19414
|
+
TransformHandleType2["Top"] = "top";
|
|
19415
|
+
TransformHandleType2["TopRight"] = "top-right";
|
|
19416
|
+
TransformHandleType2["Right"] = "right";
|
|
19417
|
+
TransformHandleType2["BottomRight"] = "bottom-right";
|
|
19418
|
+
TransformHandleType2["Bottom"] = "bottom";
|
|
19419
|
+
TransformHandleType2["BottomLeft"] = "bottom-left";
|
|
19420
|
+
TransformHandleType2["Left"] = "left";
|
|
19421
|
+
TransformHandleType2["Rotate"] = "rotate";
|
|
19422
|
+
TransformHandleType2["Pivot"] = "pivot";
|
|
19423
|
+
return TransformHandleType2;
|
|
19424
|
+
})(TransformHandleType || {});
|
|
19425
|
+
const cancelIconSvg = '<?xml version="1.0" encoding="UTF-8"?>\n<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">\n <circle cx="256" cy="256" r="236" fill="#212A32"/>\n <circle cx="256" cy="256" r="190" fill="#ffffff"/>\n <path id="path2" fill="#800000" fill-rule="evenodd" stroke="none"\n d="M 156 373.906311 C 140.875 373.871002 127.9375 373.615112 127.25 373.337708 C 126.5625 373.060303 126 372.072937 126 371.143555 C 126 370.214203 146.628433 343.53772 171.840973 311.862488 C 197.053513 280.187286 217.991867 253.463562 218.370667 252.47644 C 218.806335 251.341125 218.221786 249.464233 216.779678 247.368073 C 215.525864 245.545563 196.612503 221.361847 174.75 193.626465 C 152.887497 165.891052 135 142.531311 135 141.715881 C 135 140.900421 136.012497 139.961914 137.25 139.63028 C 138.487503 139.298645 152.408203 139.021179 168.184906 139.013641 C 184.588272 139.005859 197.976456 139.420746 199.454529 139.982727 C 201.182831 140.639801 210.486664 152.319733 227.533463 175.232727 C 241.555283 194.079712 253.994949 210.166199 255.177185 210.980438 C 257.208252 212.379272 257.562622 212.186401 261.607452 207.480438 C 263.961853 204.74118 276.052643 189 288.47583 172.5 C 300.899048 156 312.286682 141.714874 313.781738 140.75528 C 316.198669 139.203949 319.554993 139.009949 344.058868 139.00528 C 366.27774 139.001007 371.993561 139.274811 373.557343 140.418274 C 375.458923 141.808746 375.448914 141.90155 373.046875 145.150452 C 371.699341 146.973114 352.828827 170.746307 331.112396 197.979767 C 309.395966 225.213257 291.465973 248.396271 291.267914 249.497589 C 291.012512 250.91803 304.435944 268.61731 337.453918 310.395416 C 363.05426 342.787903 384 370.077271 384 371.038422 C 384 371.999603 383.288208 373.059174 382.418213 373.393005 C 381.548218 373.726868 367.485718 373.993347 351.168213 373.98526 C 329.591888 373.974548 320.854309 373.633606 319.132629 372.73526 C 317.830597 372.055847 302.980591 353.049988 286.132629 330.5 C 260.059052 295.602051 255.12793 289.5 253 289.5 C 250.878326 289.5 245.808807 295.701355 219.5 330.479431 C 202.449997 353.018127 187.375 372.023987 186 372.714691 C 184.165009 373.636475 176.184906 373.95343 156 373.906311 Z"/>\n</svg>';
|
|
19426
|
+
const confirmIconSvg = '<?xml version="1.0" encoding="UTF-8"?>\n<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">\n <circle cx="256" cy="256" r="236" fill="#212A32"/>\n <circle cx="256" cy="256" r="190" fill="#ffffff"/>\n <path id="check" fill="#008000" fill-rule="evenodd" stroke="none"\n d="M 223.844696 360 C 222.79425 360 204.506973 341.170593 178.987274 313.812744 \n C 144.992401 277.369232 135.966232 267.145691 136.201645 265.351257 \n C 136.396179 263.868408 143.092361 257.073425 155.444672 245.824249 \n C 166.363129 235.880859 175.214264 228.571442 176.336426 228.571442 \n C 177.515594 228.571442 181.716553 232.304138 186.987961 238.035706 \n C 191.775406 243.241058 201.629044 254.024994 208.884933 262 \n C 216.140823 269.975006 222.682266 276.635315 223.421478 276.80072 \n C 224.16246 276.966553 247.742722 250.494751 275.976837 217.800751 \n C 304.143097 185.185333 328.050385 157.879608 329.104156 157.121368 \n C 330.785767 155.911316 331.44046 156.0336 334.457672 158.121368 \n C 336.348328 159.429626 345.368622 167.190216 354.502747 175.367126 \n C 367.688812 187.171356 371.047394 190.689819 370.805115 192.445557 \n C 370.635864 193.67218 338.242889 231.469543 298.059082 277.32843 \n C 253.148834 328.581238 224.944153 360 223.844696 360 Z"/>\n</svg>';
|
|
19427
|
+
class TransformOverlay {
|
|
19428
|
+
constructor(map, callbacks, mode, onCancel, onConfirm) {
|
|
19429
|
+
__publicField(this, "map");
|
|
19430
|
+
__publicField(this, "pane");
|
|
19431
|
+
__publicField(this, "root");
|
|
19432
|
+
__publicField(this, "draggingHandle", null);
|
|
19433
|
+
__publicField(this, "documentMoveHandler", null);
|
|
19434
|
+
__publicField(this, "documentUpHandler", null);
|
|
19435
|
+
__publicField(this, "pointerCaptureTarget", null);
|
|
19436
|
+
__publicField(this, "activePointerId", null);
|
|
19437
|
+
__publicField(this, "callbacks");
|
|
19438
|
+
__publicField(this, "rafId", null);
|
|
19439
|
+
__publicField(this, "mode");
|
|
19440
|
+
__publicField(this, "onCancel");
|
|
19441
|
+
__publicField(this, "onConfirm");
|
|
19442
|
+
__publicField(this, "cancelBtn", null);
|
|
19443
|
+
__publicField(this, "confirmBtn", null);
|
|
19444
|
+
__publicField(this, "currentBBox", null);
|
|
19445
|
+
__publicField(this, "currentRotation", 0);
|
|
19446
|
+
__publicField(this, "buttonsHidden", false);
|
|
19447
|
+
__publicField(this, "supportsPointerEvents", typeof window !== "undefined" && "PointerEvent" in window);
|
|
19448
|
+
this.map = map;
|
|
19449
|
+
this.callbacks = callbacks;
|
|
19450
|
+
this.mode = mode;
|
|
19451
|
+
this.onCancel = onCancel;
|
|
19452
|
+
this.onConfirm = onConfirm;
|
|
19453
|
+
const paneName = "polydraw-transform";
|
|
19454
|
+
let pane = this.map.getPane ? this.map.getPane(paneName) : void 0;
|
|
19455
|
+
if (!pane) pane = this.map.createPane(paneName);
|
|
19456
|
+
pane.style.zIndex = "650";
|
|
19457
|
+
pane.style.pointerEvents = "auto";
|
|
19458
|
+
this.pane = pane;
|
|
19459
|
+
this.root = document.createElement("div");
|
|
19460
|
+
this.root.className = "polydraw-transform-root";
|
|
19461
|
+
this.root.style.position = "absolute";
|
|
19462
|
+
this.root.style.left = "0px";
|
|
19463
|
+
this.root.style.top = "0px";
|
|
19464
|
+
this.root.style.pointerEvents = "none";
|
|
19465
|
+
this.pane.appendChild(this.root);
|
|
19466
|
+
}
|
|
19467
|
+
destroy() {
|
|
19468
|
+
if (this.rafId != null) {
|
|
19469
|
+
cancelAnimationFrame(this.rafId);
|
|
19470
|
+
this.rafId = null;
|
|
19471
|
+
}
|
|
19472
|
+
this.root.remove();
|
|
19473
|
+
}
|
|
19474
|
+
update(bbox2, pivot, rotation = 0) {
|
|
19475
|
+
if (this.rafId != null) return;
|
|
19476
|
+
this.rafId = requestAnimationFrame(() => {
|
|
19477
|
+
this.rafId = null;
|
|
19478
|
+
this.render(bbox2, pivot, rotation);
|
|
19479
|
+
if (this.cancelBtn || this.confirmBtn) {
|
|
19480
|
+
const isRotateDrag = this.draggingHandle === TransformHandleType.Rotate && this.mode === "rotate";
|
|
19481
|
+
if (!isRotateDrag) {
|
|
19482
|
+
this.updateButtonPositions(bbox2, rotation);
|
|
19483
|
+
}
|
|
19484
|
+
}
|
|
19485
|
+
});
|
|
19486
|
+
}
|
|
19487
|
+
render(bbox2, _pivot, rotation = 0) {
|
|
19488
|
+
const cancelBtn = this.cancelBtn;
|
|
19489
|
+
const confirmBtn = this.confirmBtn;
|
|
19490
|
+
this.root.innerHTML = "";
|
|
19491
|
+
this.currentBBox = bbox2;
|
|
19492
|
+
this.currentRotation = rotation;
|
|
19493
|
+
this.cancelBtn = cancelBtn;
|
|
19494
|
+
this.confirmBtn = confirmBtn;
|
|
19495
|
+
const width = bbox2.maxX - bbox2.minX;
|
|
19496
|
+
const height = bbox2.maxY - bbox2.minY;
|
|
19497
|
+
const centerX = bbox2.minX + width / 2;
|
|
19498
|
+
const centerY = bbox2.minY + height / 2;
|
|
19499
|
+
const box = document.createElement("div");
|
|
19500
|
+
box.className = "polydraw-transform-box";
|
|
19501
|
+
Object.assign(box.style, {
|
|
19502
|
+
position: "absolute",
|
|
19503
|
+
left: `${centerX}px`,
|
|
19504
|
+
top: `${centerY}px`,
|
|
19505
|
+
width: `${width}px`,
|
|
19506
|
+
height: `${height}px`,
|
|
19507
|
+
marginLeft: `${-width / 2}px`,
|
|
19508
|
+
marginTop: `${-height / 2}px`,
|
|
19509
|
+
border: "1px dashed #2b90d9",
|
|
19510
|
+
pointerEvents: "none",
|
|
19511
|
+
transformOrigin: "center center",
|
|
19512
|
+
transform: `rotate(${rotation * 180 / Math.PI}deg)`
|
|
19513
|
+
});
|
|
19514
|
+
this.root.appendChild(box);
|
|
19515
|
+
const makeHandle = (type, x, y) => {
|
|
19516
|
+
const dx = x - centerX;
|
|
19517
|
+
const dy = y - centerY;
|
|
19518
|
+
const cos2 = Math.cos(rotation);
|
|
19519
|
+
const sin2 = Math.sin(rotation);
|
|
19520
|
+
const rotX = centerX + dx * cos2 - dy * sin2;
|
|
19521
|
+
const rotY = centerY + dx * sin2 + dy * cos2;
|
|
19522
|
+
const h = document.createElement("div");
|
|
19523
|
+
h.className = `polydraw-transform-handle handle-${type}`;
|
|
19524
|
+
Object.assign(h.style, {
|
|
19525
|
+
position: "absolute",
|
|
19526
|
+
left: `${rotX - 5}px`,
|
|
19527
|
+
top: `${rotY - 5}px`,
|
|
19528
|
+
width: "10px",
|
|
19529
|
+
height: "10px",
|
|
19530
|
+
borderRadius: "2px",
|
|
19531
|
+
background: "#2b90d9",
|
|
19532
|
+
boxShadow: "0 0 0 1px #fff",
|
|
19533
|
+
cursor: this.cursorForHandle(type),
|
|
19534
|
+
pointerEvents: "auto"
|
|
19535
|
+
});
|
|
19536
|
+
if (this.supportsPointerEvents) {
|
|
19537
|
+
L$1.DomEvent.on(
|
|
19538
|
+
h,
|
|
19539
|
+
"pointerdown",
|
|
19540
|
+
(e) => this.startDrag(type, { x: rotX, y: rotY }, e),
|
|
19541
|
+
this
|
|
19542
|
+
);
|
|
19543
|
+
} else {
|
|
19544
|
+
L$1.DomEvent.on(
|
|
19545
|
+
h,
|
|
19546
|
+
"mousedown",
|
|
19547
|
+
(e) => this.startDrag(type, { x: rotX, y: rotY }, e),
|
|
19548
|
+
this
|
|
19549
|
+
);
|
|
19550
|
+
L$1.DomEvent.on(
|
|
19551
|
+
h,
|
|
19552
|
+
"touchstart",
|
|
19553
|
+
(e) => this.startDrag(type, { x: rotX, y: rotY }, e),
|
|
19554
|
+
this
|
|
19555
|
+
);
|
|
19556
|
+
}
|
|
19557
|
+
this.root.appendChild(h);
|
|
19558
|
+
};
|
|
19559
|
+
if (this.mode === "scale") {
|
|
19560
|
+
makeHandle(TransformHandleType.TopLeft, bbox2.minX, bbox2.minY);
|
|
19561
|
+
makeHandle(TransformHandleType.TopRight, bbox2.maxX, bbox2.minY);
|
|
19562
|
+
makeHandle(TransformHandleType.BottomRight, bbox2.maxX, bbox2.maxY);
|
|
19563
|
+
makeHandle(TransformHandleType.BottomLeft, bbox2.minX, bbox2.maxY);
|
|
19564
|
+
makeHandle(TransformHandleType.Top, centerX, bbox2.minY);
|
|
19565
|
+
makeHandle(TransformHandleType.Right, bbox2.maxX, centerY);
|
|
19566
|
+
makeHandle(TransformHandleType.Bottom, centerX, bbox2.maxY);
|
|
19567
|
+
makeHandle(TransformHandleType.Left, bbox2.minX, centerY);
|
|
19568
|
+
} else {
|
|
19569
|
+
makeHandle(TransformHandleType.Rotate, bbox2.minX, bbox2.minY);
|
|
19570
|
+
makeHandle(TransformHandleType.Rotate, bbox2.maxX, bbox2.minY);
|
|
19571
|
+
makeHandle(TransformHandleType.Rotate, bbox2.maxX, bbox2.maxY);
|
|
19572
|
+
makeHandle(TransformHandleType.Rotate, bbox2.minX, bbox2.maxY);
|
|
19573
|
+
}
|
|
19574
|
+
if (!this.cancelBtn && !this.confirmBtn) {
|
|
19575
|
+
this.updateButtonPositions(bbox2, rotation);
|
|
19576
|
+
} else {
|
|
19577
|
+
this.updateButtonPositions(bbox2, rotation);
|
|
19578
|
+
if (this.cancelBtn) this.root.appendChild(this.cancelBtn);
|
|
19579
|
+
if (this.confirmBtn) this.root.appendChild(this.confirmBtn);
|
|
19580
|
+
}
|
|
19581
|
+
}
|
|
19582
|
+
cursorForHandle(type) {
|
|
19583
|
+
switch (type) {
|
|
19584
|
+
case TransformHandleType.Top:
|
|
19585
|
+
case TransformHandleType.Bottom:
|
|
19586
|
+
return "ns-resize";
|
|
19587
|
+
case TransformHandleType.Left:
|
|
19588
|
+
case TransformHandleType.Right:
|
|
19589
|
+
return "ew-resize";
|
|
19590
|
+
case TransformHandleType.TopLeft:
|
|
19591
|
+
case TransformHandleType.BottomRight:
|
|
19592
|
+
return "nwse-resize";
|
|
19593
|
+
case TransformHandleType.TopRight:
|
|
19594
|
+
case TransformHandleType.BottomLeft:
|
|
19595
|
+
return "nesw-resize";
|
|
19596
|
+
case TransformHandleType.Rotate:
|
|
19597
|
+
return "grab";
|
|
19598
|
+
case TransformHandleType.Pivot:
|
|
19599
|
+
return "move";
|
|
19600
|
+
default:
|
|
19601
|
+
return "default";
|
|
19602
|
+
}
|
|
19603
|
+
}
|
|
19604
|
+
startDrag(type, start, evt) {
|
|
19605
|
+
var _a2, _b2;
|
|
19606
|
+
L$1.DomEvent.stop(evt);
|
|
19607
|
+
this.draggingHandle = type;
|
|
19608
|
+
this.hideButtons();
|
|
19609
|
+
this.documentMoveHandler = (e) => this.onDrag(e);
|
|
19610
|
+
this.documentUpHandler = (e) => this.endDrag(e);
|
|
19611
|
+
if (this.supportsPointerEvents && evt instanceof PointerEvent) {
|
|
19612
|
+
this.activePointerId = evt.pointerId;
|
|
19613
|
+
this.pointerCaptureTarget = evt.target;
|
|
19614
|
+
(_b2 = (_a2 = this.pointerCaptureTarget) == null ? void 0 : _a2.setPointerCapture) == null ? void 0 : _b2.call(_a2, evt.pointerId);
|
|
19615
|
+
L$1.DomEvent.on(
|
|
19616
|
+
document,
|
|
19617
|
+
"pointermove",
|
|
19618
|
+
this.documentMoveHandler
|
|
19619
|
+
);
|
|
19620
|
+
L$1.DomEvent.on(document, "pointerup", this.documentUpHandler);
|
|
19621
|
+
L$1.DomEvent.on(
|
|
19622
|
+
document,
|
|
19623
|
+
"pointercancel",
|
|
19624
|
+
this.documentUpHandler
|
|
19625
|
+
);
|
|
19626
|
+
} else {
|
|
19627
|
+
L$1.DomEvent.on(
|
|
19628
|
+
document,
|
|
19629
|
+
"mousemove",
|
|
19630
|
+
this.documentMoveHandler
|
|
19631
|
+
);
|
|
19632
|
+
L$1.DomEvent.on(document, "mouseup", this.documentUpHandler);
|
|
19633
|
+
L$1.DomEvent.on(
|
|
19634
|
+
document,
|
|
19635
|
+
"touchmove",
|
|
19636
|
+
this.documentMoveHandler
|
|
19637
|
+
);
|
|
19638
|
+
L$1.DomEvent.on(document, "touchend", this.documentUpHandler);
|
|
19639
|
+
L$1.DomEvent.on(
|
|
19640
|
+
document,
|
|
19641
|
+
"touchcancel",
|
|
19642
|
+
this.documentUpHandler
|
|
19643
|
+
);
|
|
19644
|
+
}
|
|
19645
|
+
this.callbacks.onStartHandleDrag(type, start, evt);
|
|
19646
|
+
}
|
|
19647
|
+
onDrag(evt) {
|
|
19648
|
+
if (this.draggingHandle == null) return;
|
|
19649
|
+
const pos = this.getMouseLayerPoint(evt);
|
|
19650
|
+
this.callbacks.onDragHandle(this.draggingHandle, pos, evt);
|
|
19651
|
+
}
|
|
19652
|
+
endDrag(evt) {
|
|
19653
|
+
var _a2, _b2;
|
|
19654
|
+
if (this.draggingHandle == null) return;
|
|
19655
|
+
const type = this.draggingHandle;
|
|
19656
|
+
this.draggingHandle = null;
|
|
19657
|
+
const pos = this.getMouseLayerPoint(evt);
|
|
19658
|
+
this.callbacks.onEndHandleDrag(type, pos, evt);
|
|
19659
|
+
if (this.currentBBox) {
|
|
19660
|
+
this.updateButtonPositions(this.currentBBox, this.currentRotation);
|
|
19661
|
+
}
|
|
19662
|
+
this.showButtons();
|
|
19663
|
+
if (this.documentMoveHandler || this.documentUpHandler) {
|
|
19664
|
+
if (this.supportsPointerEvents && this.pointerCaptureTarget) {
|
|
19665
|
+
if (this.activePointerId != null) {
|
|
19666
|
+
(_b2 = (_a2 = this.pointerCaptureTarget).releasePointerCapture) == null ? void 0 : _b2.call(_a2, this.activePointerId);
|
|
19667
|
+
}
|
|
19668
|
+
if (this.documentMoveHandler) {
|
|
19669
|
+
L$1.DomEvent.off(
|
|
19670
|
+
document,
|
|
19671
|
+
"pointermove",
|
|
19672
|
+
this.documentMoveHandler
|
|
19673
|
+
);
|
|
19674
|
+
}
|
|
19675
|
+
if (this.documentUpHandler) {
|
|
19676
|
+
L$1.DomEvent.off(
|
|
19677
|
+
document,
|
|
19678
|
+
"pointerup",
|
|
19679
|
+
this.documentUpHandler
|
|
19680
|
+
);
|
|
19681
|
+
L$1.DomEvent.off(
|
|
19682
|
+
document,
|
|
19683
|
+
"pointercancel",
|
|
19684
|
+
this.documentUpHandler
|
|
19685
|
+
);
|
|
19686
|
+
}
|
|
19687
|
+
this.pointerCaptureTarget = null;
|
|
19688
|
+
this.activePointerId = null;
|
|
19689
|
+
} else {
|
|
19690
|
+
if (this.documentMoveHandler) {
|
|
19691
|
+
L$1.DomEvent.off(
|
|
19692
|
+
document,
|
|
19693
|
+
"mousemove",
|
|
19694
|
+
this.documentMoveHandler
|
|
19695
|
+
);
|
|
19696
|
+
L$1.DomEvent.off(
|
|
19697
|
+
document,
|
|
19698
|
+
"touchmove",
|
|
19699
|
+
this.documentMoveHandler
|
|
19700
|
+
);
|
|
19701
|
+
}
|
|
19702
|
+
if (this.documentUpHandler) {
|
|
19703
|
+
L$1.DomEvent.off(
|
|
19704
|
+
document,
|
|
19705
|
+
"mouseup",
|
|
19706
|
+
this.documentUpHandler
|
|
19707
|
+
);
|
|
19708
|
+
L$1.DomEvent.off(
|
|
19709
|
+
document,
|
|
19710
|
+
"touchend",
|
|
19711
|
+
this.documentUpHandler
|
|
19712
|
+
);
|
|
19713
|
+
L$1.DomEvent.off(
|
|
19714
|
+
document,
|
|
19715
|
+
"touchcancel",
|
|
19716
|
+
this.documentUpHandler
|
|
19717
|
+
);
|
|
19718
|
+
}
|
|
19719
|
+
}
|
|
19720
|
+
this.documentMoveHandler = null;
|
|
19721
|
+
this.documentUpHandler = null;
|
|
19722
|
+
}
|
|
19723
|
+
}
|
|
19724
|
+
getMouseLayerPoint(evt) {
|
|
19725
|
+
const container = this.map.getContainer();
|
|
19726
|
+
let clientX = null;
|
|
19727
|
+
let clientY = null;
|
|
19728
|
+
if (evt.touches && evt.touches.length > 0) {
|
|
19729
|
+
const touch = evt.touches[0];
|
|
19730
|
+
clientX = touch.clientX;
|
|
19731
|
+
clientY = touch.clientY;
|
|
19732
|
+
} else if (evt.changedTouches && evt.changedTouches.length > 0) {
|
|
19733
|
+
const touch = evt.changedTouches[0];
|
|
19734
|
+
clientX = touch.clientX;
|
|
19735
|
+
clientY = touch.clientY;
|
|
19736
|
+
} else if (evt.clientX != null) {
|
|
19737
|
+
clientX = evt.clientX;
|
|
19738
|
+
clientY = evt.clientY;
|
|
19739
|
+
}
|
|
19740
|
+
if (clientX == null || clientY == null) {
|
|
19741
|
+
clientX = 0;
|
|
19742
|
+
clientY = 0;
|
|
19743
|
+
}
|
|
19744
|
+
const rect = container.getBoundingClientRect();
|
|
19745
|
+
const x = clientX - rect.left;
|
|
19746
|
+
const y = clientY - rect.top;
|
|
19747
|
+
const containerPoint = leafletAdapter.createPoint(x, y);
|
|
19748
|
+
const layerPoint = this.map.containerPointToLayerPoint(containerPoint);
|
|
19749
|
+
return { x: layerPoint.x, y: layerPoint.y };
|
|
19750
|
+
}
|
|
19751
|
+
updateButtonPositions(bbox2, rotation) {
|
|
19752
|
+
const width = bbox2.maxX - bbox2.minX;
|
|
19753
|
+
const height = bbox2.maxY - bbox2.minY;
|
|
19754
|
+
const centerX = bbox2.minX + width / 2;
|
|
19755
|
+
const centerY = bbox2.minY + height / 2;
|
|
19756
|
+
const corners = [
|
|
19757
|
+
{ x: bbox2.minX, y: bbox2.minY },
|
|
19758
|
+
// top-left
|
|
19759
|
+
{ x: bbox2.maxX, y: bbox2.minY },
|
|
19760
|
+
// top-right
|
|
19761
|
+
{ x: bbox2.maxX, y: bbox2.maxY },
|
|
19762
|
+
// bottom-right
|
|
19763
|
+
{ x: bbox2.minX, y: bbox2.maxY }
|
|
19764
|
+
// bottom-left
|
|
19765
|
+
];
|
|
19766
|
+
const cos2 = Math.cos(rotation);
|
|
19767
|
+
const sin2 = Math.sin(rotation);
|
|
19768
|
+
let topRightCorner = { x: 0, y: Infinity };
|
|
19769
|
+
let minY = Infinity;
|
|
19770
|
+
for (const corner of corners) {
|
|
19771
|
+
const dx = corner.x - centerX;
|
|
19772
|
+
const dy = corner.y - centerY;
|
|
19773
|
+
const rotX = centerX + dx * cos2 - dy * sin2;
|
|
19774
|
+
const rotY = centerY + dx * sin2 + dy * cos2;
|
|
19775
|
+
const isHigher = rotY < minY;
|
|
19776
|
+
const isSameHeight = Math.abs(rotY - minY) < 1;
|
|
19777
|
+
const isMoreRight = rotX > topRightCorner.x;
|
|
19778
|
+
if (isHigher || isSameHeight && isMoreRight) {
|
|
19779
|
+
minY = rotY;
|
|
19780
|
+
topRightCorner = { x: rotX, y: rotY };
|
|
19781
|
+
}
|
|
19782
|
+
}
|
|
19783
|
+
const rotTopRightX = topRightCorner.x;
|
|
19784
|
+
const rotTopRightY = topRightCorner.y;
|
|
19785
|
+
const buttonY = rotTopRightY - 28;
|
|
19786
|
+
const confirmX = rotTopRightX + 5;
|
|
19787
|
+
const cancelX = rotTopRightX - 29;
|
|
19788
|
+
const cancelSvg = cancelIconSvg;
|
|
19789
|
+
const confirmSvg = confirmIconSvg;
|
|
19790
|
+
if (this.onCancel && !this.cancelBtn) {
|
|
19791
|
+
this.cancelBtn = document.createElement("div");
|
|
19792
|
+
this.cancelBtn.className = "polydraw-transform-cancel";
|
|
19793
|
+
this.cancelBtn.innerHTML = cancelSvg;
|
|
19794
|
+
L$1.DomEvent.on(this.cancelBtn, "mousedown", (e) => {
|
|
19795
|
+
var _a2, _b2;
|
|
19796
|
+
(_a2 = e.stopPropagation) == null ? void 0 : _a2.call(e);
|
|
19797
|
+
(_b2 = e.preventDefault) == null ? void 0 : _b2.call(e);
|
|
19798
|
+
this.onCancel && this.onCancel();
|
|
19799
|
+
});
|
|
19800
|
+
L$1.DomEvent.on(this.cancelBtn, "touchstart", (e) => {
|
|
19801
|
+
var _a2, _b2;
|
|
19802
|
+
(_a2 = e.stopPropagation) == null ? void 0 : _a2.call(e);
|
|
19803
|
+
(_b2 = e.preventDefault) == null ? void 0 : _b2.call(e);
|
|
19804
|
+
this.onCancel && this.onCancel();
|
|
19805
|
+
});
|
|
19806
|
+
this.root.appendChild(this.cancelBtn);
|
|
19807
|
+
}
|
|
19808
|
+
if (this.onConfirm && !this.confirmBtn) {
|
|
19809
|
+
this.confirmBtn = document.createElement("div");
|
|
19810
|
+
this.confirmBtn.className = "polydraw-transform-confirm";
|
|
19811
|
+
this.confirmBtn.innerHTML = confirmSvg;
|
|
19812
|
+
L$1.DomEvent.on(this.confirmBtn, "mousedown", (e) => {
|
|
19813
|
+
var _a2, _b2;
|
|
19814
|
+
(_a2 = e.stopPropagation) == null ? void 0 : _a2.call(e);
|
|
19815
|
+
(_b2 = e.preventDefault) == null ? void 0 : _b2.call(e);
|
|
19816
|
+
this.onConfirm && this.onConfirm();
|
|
19817
|
+
});
|
|
19818
|
+
L$1.DomEvent.on(this.confirmBtn, "touchstart", (e) => {
|
|
19819
|
+
var _a2, _b2;
|
|
19820
|
+
(_a2 = e.stopPropagation) == null ? void 0 : _a2.call(e);
|
|
19821
|
+
(_b2 = e.preventDefault) == null ? void 0 : _b2.call(e);
|
|
19822
|
+
this.onConfirm && this.onConfirm();
|
|
19823
|
+
});
|
|
19824
|
+
this.root.appendChild(this.confirmBtn);
|
|
19825
|
+
}
|
|
19826
|
+
if (this.cancelBtn) {
|
|
19827
|
+
Object.assign(this.cancelBtn.style, {
|
|
19828
|
+
position: "absolute",
|
|
19829
|
+
left: `${cancelX}px`,
|
|
19830
|
+
top: `${buttonY}px`,
|
|
19831
|
+
display: "grid",
|
|
19832
|
+
placeItems: "center",
|
|
19833
|
+
pointerEvents: "auto",
|
|
19834
|
+
width: "28px",
|
|
19835
|
+
height: "28px"
|
|
19836
|
+
});
|
|
19837
|
+
const svg = this.cancelBtn.querySelector("svg");
|
|
19838
|
+
if (svg) {
|
|
19839
|
+
svg.setAttribute("width", "24");
|
|
19840
|
+
svg.setAttribute("height", "24");
|
|
19841
|
+
}
|
|
19842
|
+
this.cancelBtn.style.display = this.buttonsHidden ? "none" : "grid";
|
|
19843
|
+
}
|
|
19844
|
+
if (this.confirmBtn) {
|
|
19845
|
+
Object.assign(this.confirmBtn.style, {
|
|
19846
|
+
position: "absolute",
|
|
19847
|
+
left: `${confirmX}px`,
|
|
19848
|
+
top: `${buttonY}px`,
|
|
19849
|
+
display: "grid",
|
|
19850
|
+
placeItems: "center",
|
|
19851
|
+
pointerEvents: "auto",
|
|
19852
|
+
width: "28px",
|
|
19853
|
+
height: "28px"
|
|
19854
|
+
});
|
|
19855
|
+
const svg = this.confirmBtn.querySelector("svg");
|
|
19856
|
+
if (svg) {
|
|
19857
|
+
svg.setAttribute("width", "24");
|
|
19858
|
+
svg.setAttribute("height", "24");
|
|
19859
|
+
}
|
|
19860
|
+
this.confirmBtn.style.display = this.buttonsHidden ? "none" : "grid";
|
|
19861
|
+
}
|
|
19862
|
+
}
|
|
19863
|
+
hideButtons() {
|
|
19864
|
+
this.buttonsHidden = true;
|
|
19865
|
+
if (this.cancelBtn) this.cancelBtn.style.display = "none";
|
|
19866
|
+
if (this.confirmBtn) this.confirmBtn.style.display = "none";
|
|
19867
|
+
}
|
|
19868
|
+
showButtons() {
|
|
19869
|
+
this.buttonsHidden = false;
|
|
19870
|
+
if (this.cancelBtn) this.cancelBtn.style.display = "grid";
|
|
19871
|
+
if (this.confirmBtn) this.confirmBtn.style.display = "grid";
|
|
19872
|
+
}
|
|
19873
|
+
}
|
|
19874
|
+
function latLngToPixel(map, ll) {
|
|
19875
|
+
const p = map.latLngToLayerPoint(ll);
|
|
19876
|
+
return { x: p.x, y: p.y };
|
|
19877
|
+
}
|
|
19878
|
+
function pixelToLatLng(map, p) {
|
|
19879
|
+
const ll = map.layerPointToLatLng(leafletAdapter.createPoint(p.x, p.y));
|
|
19880
|
+
return { lat: ll.lat, lng: ll.lng };
|
|
19881
|
+
}
|
|
19882
|
+
function getPixelBBox(rings) {
|
|
19883
|
+
let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
|
|
19884
|
+
for (const poly of rings) {
|
|
19885
|
+
for (const ring of poly) {
|
|
19886
|
+
for (const pt of ring) {
|
|
19887
|
+
if (pt.x < minX) minX = pt.x;
|
|
19888
|
+
if (pt.y < minY) minY = pt.y;
|
|
19889
|
+
if (pt.x > maxX) maxX = pt.x;
|
|
19890
|
+
if (pt.y > maxY) maxY = pt.y;
|
|
19891
|
+
}
|
|
19892
|
+
}
|
|
19893
|
+
}
|
|
19894
|
+
return { minX, minY, maxX, maxY };
|
|
19895
|
+
}
|
|
19896
|
+
function getPixelCentroid(bbox2) {
|
|
19897
|
+
return { x: (bbox2.minX + bbox2.maxX) / 2, y: (bbox2.minY + bbox2.maxY) / 2 };
|
|
19898
|
+
}
|
|
19899
|
+
function rotatePointAround(p, pivot, radians2) {
|
|
19900
|
+
const cos2 = Math.cos(radians2);
|
|
19901
|
+
const sin2 = Math.sin(radians2);
|
|
19902
|
+
const dx = p.x - pivot.x;
|
|
19903
|
+
const dy = p.y - pivot.y;
|
|
19904
|
+
return { x: pivot.x + dx * cos2 - dy * sin2, y: pivot.y + dx * sin2 + dy * cos2 };
|
|
19905
|
+
}
|
|
19906
|
+
function scalePointAround(p, pivot, scaleX, scaleY) {
|
|
19907
|
+
const dx = p.x - pivot.x;
|
|
19908
|
+
const dy = p.y - pivot.y;
|
|
19909
|
+
return { x: pivot.x + dx * scaleX, y: pivot.y + dy * scaleY };
|
|
19910
|
+
}
|
|
19911
|
+
function applyTransform(rings, pivot, scaleX, scaleY, rotation) {
|
|
19912
|
+
return rings.map(
|
|
19913
|
+
(poly) => poly.map(
|
|
19914
|
+
(ring) => ring.map(
|
|
19915
|
+
(pt) => rotatePointAround(scalePointAround(pt, pivot, scaleX, scaleY), pivot, rotation)
|
|
19916
|
+
)
|
|
19917
|
+
)
|
|
19918
|
+
);
|
|
19919
|
+
}
|
|
19920
|
+
function ensureClosedLatLngRing(ll) {
|
|
19921
|
+
if (ll.length === 0) return ll;
|
|
19922
|
+
const first = ll[0];
|
|
19923
|
+
const last = ll[ll.length - 1];
|
|
19924
|
+
if (first.lat === last.lat && first.lng === last.lng) return ll;
|
|
19925
|
+
return [...ll, { lat: first.lat, lng: first.lng }];
|
|
19926
|
+
}
|
|
19927
|
+
function normalizeLatLngs(input) {
|
|
19928
|
+
if (!Array.isArray(input)) {
|
|
19929
|
+
return [[input]];
|
|
19930
|
+
}
|
|
19931
|
+
const a = input;
|
|
19932
|
+
if (a.length === 0) return [];
|
|
19933
|
+
if (!Array.isArray(a[0])) {
|
|
19934
|
+
return [[input]];
|
|
19935
|
+
}
|
|
19936
|
+
if (!Array.isArray(a[0][0])) {
|
|
19937
|
+
return [input];
|
|
19938
|
+
}
|
|
19939
|
+
return input;
|
|
19940
|
+
}
|
|
19941
|
+
function projectLatLngs(map, latLngs) {
|
|
19942
|
+
const rings = [];
|
|
19943
|
+
const ringLengths = [];
|
|
19944
|
+
for (const poly of latLngs) {
|
|
19945
|
+
const polyRings = [];
|
|
19946
|
+
const lengths = [];
|
|
19947
|
+
for (const ring of poly) {
|
|
19948
|
+
const pts = ring.map((ll) => latLngToPixel(map, { lat: ll.lat, lng: ll.lng }));
|
|
19949
|
+
polyRings.push(pts);
|
|
19950
|
+
lengths.push(ring.length);
|
|
19951
|
+
}
|
|
19952
|
+
rings.push(polyRings);
|
|
19953
|
+
ringLengths.push(lengths);
|
|
19954
|
+
}
|
|
19955
|
+
return { rings, ringLengths };
|
|
19956
|
+
}
|
|
19957
|
+
function unprojectToLatLngs(map, rings, templateLatLngs) {
|
|
19958
|
+
const out = [];
|
|
19959
|
+
for (let i = 0; i < rings.length; i++) {
|
|
19960
|
+
const poly = [];
|
|
19961
|
+
for (let j = 0; j < rings[i].length; j++) {
|
|
19962
|
+
const ringPts = rings[i][j];
|
|
19963
|
+
const ll = ringPts.map((p) => pixelToLatLng(map, p));
|
|
19964
|
+
const templ = templateLatLngs[i][j];
|
|
19965
|
+
const isClosed = templ.length > 2 && templ[0].lat === templ[templ.length - 1].lat && templ[0].lng === templ[templ.length - 1].lng;
|
|
19966
|
+
poly.push(isClosed ? ensureClosedLatLngRing(ll) : ll);
|
|
19967
|
+
}
|
|
19968
|
+
out.push(poly);
|
|
19969
|
+
}
|
|
19970
|
+
return out;
|
|
19971
|
+
}
|
|
19972
|
+
function snapAngleRadians(angle, stepDeg = 15) {
|
|
19973
|
+
const step = stepDeg * Math.PI / 180;
|
|
19974
|
+
return Math.round(angle / step) * step;
|
|
19975
|
+
}
|
|
19976
|
+
class PolygonTransformController {
|
|
19977
|
+
constructor(map, featureGroup, mode = "scale", onExit) {
|
|
19978
|
+
__publicField(this, "map");
|
|
19979
|
+
__publicField(this, "polygon");
|
|
19980
|
+
__publicField(this, "overlay");
|
|
19981
|
+
__publicField(this, "state");
|
|
19982
|
+
__publicField(this, "normalizedLatLngs");
|
|
19983
|
+
__publicField(this, "wasMapDraggingEnabled", false);
|
|
19984
|
+
__publicField(this, "mode");
|
|
19985
|
+
__publicField(this, "onExit");
|
|
19986
|
+
__publicField(this, "rotateStartAngle", null);
|
|
19987
|
+
__publicField(this, "rotateBaseRotation", 0);
|
|
19988
|
+
__publicField(this, "onKeyDown", (e) => {
|
|
19989
|
+
if (e.key === "Escape") {
|
|
19990
|
+
this.handleCancel();
|
|
19991
|
+
}
|
|
19992
|
+
});
|
|
19993
|
+
__publicField(this, "updateOverlay", () => {
|
|
19994
|
+
const scaledRings = this.state.originalPixelRings.map(
|
|
19995
|
+
(poly) => poly.map(
|
|
19996
|
+
(ring) => ring.map(
|
|
19997
|
+
(pt) => scalePointAround(pt, this.state.pivot, this.state.scaleX, this.state.scaleY)
|
|
19998
|
+
)
|
|
19999
|
+
)
|
|
20000
|
+
);
|
|
20001
|
+
const bbox2 = getPixelBBox(scaledRings);
|
|
20002
|
+
this.overlay.update(bbox2, this.state.pivot, this.state.rotation);
|
|
20003
|
+
});
|
|
20004
|
+
this.map = map;
|
|
20005
|
+
this.mode = mode;
|
|
20006
|
+
this.onExit = onExit;
|
|
20007
|
+
const polygon2 = featureGroup.getLayers().find((l) => l instanceof L$1.Polygon);
|
|
20008
|
+
if (!polygon2) throw new Error("FeatureGroup does not contain a polygon");
|
|
20009
|
+
this.polygon = polygon2;
|
|
20010
|
+
const originalLatLngs = this.polygon.getLatLngs();
|
|
20011
|
+
this.normalizedLatLngs = normalizeLatLngs(originalLatLngs);
|
|
20012
|
+
const proj = projectLatLngs(this.map, this.normalizedLatLngs);
|
|
20013
|
+
const bbox2 = getPixelBBox(proj.rings);
|
|
20014
|
+
const pivot = getPixelCentroid(bbox2);
|
|
20015
|
+
this.state = {
|
|
20016
|
+
isActive: true,
|
|
20017
|
+
originalLatLngs,
|
|
20018
|
+
originalPixelRings: proj.rings,
|
|
20019
|
+
pivot,
|
|
20020
|
+
scaleX: 1,
|
|
20021
|
+
scaleY: 1,
|
|
20022
|
+
rotation: 0,
|
|
20023
|
+
uniformScale: false,
|
|
20024
|
+
snapRotation: false,
|
|
20025
|
+
scaleFromPivot: false
|
|
20026
|
+
};
|
|
20027
|
+
this.overlay = new TransformOverlay(
|
|
20028
|
+
this.map,
|
|
20029
|
+
{
|
|
20030
|
+
onStartHandleDrag: (type, start, e) => this.onStartDrag(type, start, e),
|
|
20031
|
+
onDragHandle: (type, current, e) => this.onDrag(type, current, e),
|
|
20032
|
+
onEndHandleDrag: (_type, _end, _e) => {
|
|
20033
|
+
}
|
|
20034
|
+
},
|
|
20035
|
+
this.mode,
|
|
20036
|
+
() => this.handleCancel(),
|
|
20037
|
+
() => this.handleConfirm()
|
|
20038
|
+
);
|
|
20039
|
+
this.updateOverlay();
|
|
20040
|
+
this.map.on("zoom viewreset move", this.updateOverlay, this);
|
|
20041
|
+
if (this.map.dragging) {
|
|
20042
|
+
const dragging = this.map.dragging;
|
|
20043
|
+
if (typeof dragging.enabled === "function") {
|
|
20044
|
+
this.wasMapDraggingEnabled = dragging.enabled();
|
|
20045
|
+
}
|
|
20046
|
+
dragging.disable();
|
|
20047
|
+
}
|
|
20048
|
+
document.addEventListener("keydown", this.onKeyDown);
|
|
20049
|
+
}
|
|
20050
|
+
destroy() {
|
|
20051
|
+
document.removeEventListener("keydown", this.onKeyDown);
|
|
20052
|
+
this.map.off("zoom viewreset move", this.updateOverlay, this);
|
|
20053
|
+
this.overlay.destroy();
|
|
20054
|
+
this.state.isActive = false;
|
|
20055
|
+
if (this.map.dragging) {
|
|
20056
|
+
const dragging = this.map.dragging;
|
|
20057
|
+
if (this.wasMapDraggingEnabled && typeof dragging.enable === "function") {
|
|
20058
|
+
dragging.enable();
|
|
20059
|
+
}
|
|
20060
|
+
}
|
|
20061
|
+
}
|
|
20062
|
+
onStartDrag(type, start, evt) {
|
|
20063
|
+
const isMac = navigator.userAgent.toLowerCase().includes("mac");
|
|
20064
|
+
const ctrlOrCmd = isMac ? evt.metaKey : evt.ctrlKey;
|
|
20065
|
+
this.state.uniformScale = !!evt.shiftKey;
|
|
20066
|
+
this.state.scaleFromPivot = !!evt.altKey;
|
|
20067
|
+
this.state.snapRotation = !!ctrlOrCmd;
|
|
20068
|
+
if (type === TransformHandleType.Rotate) {
|
|
20069
|
+
const c = this.state.scaleFromPivot ? this.state.pivot : getPixelCentroid(getPixelBBox(this.state.originalPixelRings));
|
|
20070
|
+
const startAngle = Math.atan2(start.y - c.y, start.x - c.x);
|
|
20071
|
+
this.rotateStartAngle = startAngle;
|
|
20072
|
+
this.rotateBaseRotation = this.state.rotation || 0;
|
|
20073
|
+
}
|
|
20074
|
+
}
|
|
20075
|
+
onDrag(type, current, _evt) {
|
|
20076
|
+
const origBBox = getPixelBBox(this.state.originalPixelRings);
|
|
20077
|
+
switch (type) {
|
|
20078
|
+
case TransformHandleType.Rotate: {
|
|
20079
|
+
const rotationCenter = this.state.scaleFromPivot ? this.state.pivot : getPixelCentroid(origBBox);
|
|
20080
|
+
this.handleRotateDrag(current, rotationCenter);
|
|
20081
|
+
break;
|
|
20082
|
+
}
|
|
20083
|
+
case TransformHandleType.Pivot:
|
|
20084
|
+
this.handlePivotDrag(current);
|
|
20085
|
+
break;
|
|
20086
|
+
default: {
|
|
20087
|
+
const scaleCenter = this.state.scaleFromPivot ? this.state.pivot : getPixelCentroid(origBBox);
|
|
20088
|
+
this.handleScaleDrag(type, current, origBBox, scaleCenter);
|
|
20089
|
+
break;
|
|
20090
|
+
}
|
|
20091
|
+
}
|
|
20092
|
+
this.preview();
|
|
20093
|
+
}
|
|
20094
|
+
handleRotateDrag(current, center2) {
|
|
20095
|
+
if (this.mode !== "rotate") return;
|
|
20096
|
+
const angle = Math.atan2(current.y - center2.y, current.x - center2.x);
|
|
20097
|
+
let theta;
|
|
20098
|
+
if (this.rotateStartAngle != null) {
|
|
20099
|
+
const delta = angle - this.rotateStartAngle;
|
|
20100
|
+
theta = this.rotateBaseRotation + delta;
|
|
20101
|
+
} else {
|
|
20102
|
+
theta = angle;
|
|
20103
|
+
}
|
|
20104
|
+
this.state.rotation = this.state.snapRotation ? snapAngleRadians(theta, 15) : theta;
|
|
20105
|
+
}
|
|
20106
|
+
handlePivotDrag(current) {
|
|
20107
|
+
this.state.pivot = current;
|
|
20108
|
+
}
|
|
20109
|
+
handleScaleDrag(type, current, origBBox, center2) {
|
|
20110
|
+
if (this.mode !== "scale") return;
|
|
20111
|
+
const width = origBBox.maxX - origBBox.minX;
|
|
20112
|
+
const height = origBBox.maxY - origBBox.minY;
|
|
20113
|
+
let scaleX = this.state.scaleX;
|
|
20114
|
+
let scaleY = this.state.scaleY;
|
|
20115
|
+
switch (type) {
|
|
20116
|
+
case TransformHandleType.Left:
|
|
20117
|
+
case TransformHandleType.TopLeft:
|
|
20118
|
+
case TransformHandleType.BottomLeft:
|
|
20119
|
+
scaleX = (center2.x - current.x) / (center2.x - origBBox.minX || 1);
|
|
20120
|
+
break;
|
|
20121
|
+
case TransformHandleType.Right:
|
|
20122
|
+
case TransformHandleType.TopRight:
|
|
20123
|
+
case TransformHandleType.BottomRight:
|
|
20124
|
+
scaleX = (current.x - center2.x) / (origBBox.maxX - center2.x || 1);
|
|
20125
|
+
break;
|
|
20126
|
+
}
|
|
20127
|
+
switch (type) {
|
|
20128
|
+
case TransformHandleType.Top:
|
|
20129
|
+
case TransformHandleType.TopLeft:
|
|
20130
|
+
case TransformHandleType.TopRight:
|
|
20131
|
+
scaleY = (center2.y - current.y) / (center2.y - origBBox.minY || 1);
|
|
20132
|
+
break;
|
|
20133
|
+
case TransformHandleType.Bottom:
|
|
20134
|
+
case TransformHandleType.BottomLeft:
|
|
20135
|
+
case TransformHandleType.BottomRight:
|
|
20136
|
+
scaleY = (current.y - center2.y) / (origBBox.maxY - center2.y || 1);
|
|
20137
|
+
break;
|
|
20138
|
+
}
|
|
20139
|
+
if (type === TransformHandleType.Left || type === TransformHandleType.Right) {
|
|
20140
|
+
scaleY = this.state.scaleY;
|
|
20141
|
+
}
|
|
20142
|
+
if (type === TransformHandleType.Top || type === TransformHandleType.Bottom) {
|
|
20143
|
+
scaleX = this.state.scaleX;
|
|
20144
|
+
}
|
|
20145
|
+
if (this.state.uniformScale) {
|
|
20146
|
+
const uniform = Math.abs(width) > Math.abs(height) ? Math.sign(scaleX) * Math.abs(scaleX) : Math.sign(scaleY) * Math.abs(scaleY);
|
|
20147
|
+
scaleX = uniform;
|
|
20148
|
+
scaleY = uniform;
|
|
20149
|
+
}
|
|
20150
|
+
const hasValidScaleX = Number.isFinite(scaleX) && Math.abs(scaleX) > 1e-3;
|
|
20151
|
+
const hasValidScaleY = Number.isFinite(scaleY) && Math.abs(scaleY) > 1e-3;
|
|
20152
|
+
if (hasValidScaleX) {
|
|
20153
|
+
this.state.scaleX = scaleX;
|
|
20154
|
+
}
|
|
20155
|
+
if (hasValidScaleY) {
|
|
20156
|
+
this.state.scaleY = scaleY;
|
|
20157
|
+
}
|
|
20158
|
+
}
|
|
20159
|
+
preview() {
|
|
20160
|
+
const transformed = applyTransform(
|
|
20161
|
+
this.state.originalPixelRings,
|
|
20162
|
+
this.state.pivot,
|
|
20163
|
+
this.state.scaleX,
|
|
20164
|
+
this.state.scaleY,
|
|
20165
|
+
this.state.rotation
|
|
20166
|
+
);
|
|
20167
|
+
const ll = unprojectToLatLngs(this.map, transformed, this.normalizedLatLngs);
|
|
20168
|
+
this.polygon.setLatLngs(ll);
|
|
20169
|
+
this.updateOverlay();
|
|
20170
|
+
}
|
|
20171
|
+
apply() {
|
|
20172
|
+
const coords = this.polygon.getLatLngs();
|
|
20173
|
+
return normalizeLatLngs(coords);
|
|
20174
|
+
}
|
|
20175
|
+
cancel() {
|
|
20176
|
+
this.polygon.setLatLngs(this.state.originalLatLngs);
|
|
20177
|
+
}
|
|
20178
|
+
handleCancel() {
|
|
20179
|
+
this.cancel();
|
|
20180
|
+
this.destroy();
|
|
20181
|
+
if (this.onExit) this.onExit();
|
|
20182
|
+
}
|
|
20183
|
+
handleConfirm() {
|
|
20184
|
+
if (this.onExit) this.onExit();
|
|
20185
|
+
this.destroy();
|
|
20186
|
+
}
|
|
20187
|
+
}
|
|
20188
|
+
class PopupFactory {
|
|
20189
|
+
/**
|
|
20190
|
+
* Creates a menu button element.
|
|
20191
|
+
* @param id Unique identifier for the button.
|
|
20192
|
+
* @param title Tooltip text.
|
|
20193
|
+
* @param cssClasses Additional CSS classes to apply.
|
|
20194
|
+
* @param options Optional configuration (alpha banner, etc.).
|
|
20195
|
+
* @returns HTMLDivElement representing the menu button.
|
|
20196
|
+
*/
|
|
20197
|
+
static createMenuButton(id, title, cssClasses, options) {
|
|
20198
|
+
const button = document.createElement("div");
|
|
20199
|
+
button.classList.add("marker-menu-button", ...cssClasses);
|
|
20200
|
+
button.title = title;
|
|
20201
|
+
button.setAttribute("data-action-id", id);
|
|
20202
|
+
if (options == null ? void 0 : options.alphaBanner) {
|
|
20203
|
+
const alphaBanner = document.createElement("span");
|
|
20204
|
+
alphaBanner.classList.add("alpha-banner");
|
|
20205
|
+
alphaBanner.textContent = "ALPHA";
|
|
20206
|
+
button.appendChild(alphaBanner);
|
|
20207
|
+
}
|
|
20208
|
+
return button;
|
|
20209
|
+
}
|
|
20210
|
+
/**
|
|
20211
|
+
* Builds a menu popup container structure.
|
|
20212
|
+
* @param buttons Array of button elements to include.
|
|
20213
|
+
* @returns HTMLDivElement containing the complete menu structure.
|
|
20214
|
+
*/
|
|
20215
|
+
static buildMenuPopup(buttons) {
|
|
20216
|
+
const outerWrapper = document.createElement("div");
|
|
20217
|
+
outerWrapper.classList.add("alter-marker-outer-wrapper");
|
|
20218
|
+
const wrapper = document.createElement("div");
|
|
20219
|
+
wrapper.classList.add("alter-marker-wrapper");
|
|
20220
|
+
const closeButton = document.createElement("button");
|
|
20221
|
+
closeButton.type = "button";
|
|
20222
|
+
closeButton.className = "marker-menu-close";
|
|
20223
|
+
closeButton.setAttribute("aria-label", "Close menu");
|
|
20224
|
+
closeButton.innerHTML = "×";
|
|
20225
|
+
wrapper.appendChild(closeButton);
|
|
20226
|
+
const markerContent = document.createElement("div");
|
|
20227
|
+
markerContent.classList.add("content");
|
|
20228
|
+
const markerContentWrapper = document.createElement("div");
|
|
20229
|
+
markerContentWrapper.classList.add("marker-menu-content");
|
|
20230
|
+
buttons.forEach((button) => {
|
|
20231
|
+
markerContentWrapper.appendChild(button);
|
|
20232
|
+
});
|
|
20233
|
+
markerContent.appendChild(markerContentWrapper);
|
|
20234
|
+
wrapper.appendChild(markerContent);
|
|
20235
|
+
outerWrapper.appendChild(wrapper);
|
|
20236
|
+
return outerWrapper;
|
|
20237
|
+
}
|
|
20238
|
+
/**
|
|
20239
|
+
* Builds an info popup container structure.
|
|
20240
|
+
* @param content HTML element to display inside the popup.
|
|
20241
|
+
* @returns HTMLDivElement containing the complete info popup structure.
|
|
20242
|
+
*/
|
|
20243
|
+
static buildInfoPopup(content) {
|
|
20244
|
+
const outerWrapper = document.createElement("div");
|
|
20245
|
+
outerWrapper.classList.add("info-marker-outer-wrapper");
|
|
20246
|
+
const wrapper = document.createElement("div");
|
|
20247
|
+
wrapper.classList.add("info-marker-wrapper");
|
|
20248
|
+
const markerContent = document.createElement("div");
|
|
20249
|
+
markerContent.classList.add("content");
|
|
20250
|
+
markerContent.appendChild(content);
|
|
20251
|
+
wrapper.appendChild(markerContent);
|
|
20252
|
+
outerWrapper.appendChild(wrapper);
|
|
20253
|
+
return outerWrapper;
|
|
20254
|
+
}
|
|
20255
|
+
}
|
|
19110
20256
|
class PolygonInteractionManager {
|
|
19111
20257
|
constructor(dependencies, featureGroupAccess) {
|
|
19112
20258
|
__publicField(this, "markerFeatureGroupMap", /* @__PURE__ */ new WeakMap());
|
|
@@ -19124,6 +20270,9 @@ class PolygonInteractionManager {
|
|
|
19124
20270
|
__publicField(this, "currentModifierDragMode", false);
|
|
19125
20271
|
__publicField(this, "isModifierKeyHeld", false);
|
|
19126
20272
|
__publicField(this, "_openMenuPopup", null);
|
|
20273
|
+
__publicField(this, "transformModeActive", false);
|
|
20274
|
+
__publicField(this, "transformControllers", /* @__PURE__ */ new WeakMap());
|
|
20275
|
+
__publicField(this, "deleteMarkerSuppressUntil", 0);
|
|
19127
20276
|
// Read-only access to feature groups
|
|
19128
20277
|
__publicField(this, "getFeatureGroups");
|
|
19129
20278
|
__publicField(this, "removeFeatureGroup");
|
|
@@ -19208,6 +20357,24 @@ class PolygonInteractionManager {
|
|
|
19208
20357
|
this.getFeatureGroups = featureGroupAccess.getFeatureGroups;
|
|
19209
20358
|
this.removeFeatureGroup = featureGroupAccess.removeFeatureGroup;
|
|
19210
20359
|
}
|
|
20360
|
+
/**
|
|
20361
|
+
* Strongly typed helper to emit polygon updated events without casts.
|
|
20362
|
+
*/
|
|
20363
|
+
emitPolygonUpdated(data) {
|
|
20364
|
+
this.eventManager.emit("polydraw:polygon:updated", data);
|
|
20365
|
+
}
|
|
20366
|
+
getTimestamp() {
|
|
20367
|
+
if (typeof performance !== "undefined" && typeof performance.now === "function") {
|
|
20368
|
+
return performance.now();
|
|
20369
|
+
}
|
|
20370
|
+
return Date.now();
|
|
20371
|
+
}
|
|
20372
|
+
shouldSuppressDeleteMarkerClick() {
|
|
20373
|
+
return this.getTimestamp() < this.deleteMarkerSuppressUntil;
|
|
20374
|
+
}
|
|
20375
|
+
suppressDeleteMarkerClicks(durationMs) {
|
|
20376
|
+
this.deleteMarkerSuppressUntil = this.getTimestamp() + Math.max(0, durationMs);
|
|
20377
|
+
}
|
|
19211
20378
|
/**
|
|
19212
20379
|
* Add markers to a polygon feature group
|
|
19213
20380
|
*/
|
|
@@ -19313,7 +20480,10 @@ class PolygonInteractionManager {
|
|
|
19313
20480
|
marker.options.zIndexOffset = this.config.markers.markerMenuIcon.zIndexOffset ?? this.config.markers.zIndexOffset;
|
|
19314
20481
|
marker.on("click", () => {
|
|
19315
20482
|
const polygonGeoJSON = this.getPolygonGeoJSONFromFeatureGroup(featureGroup);
|
|
19316
|
-
const centerOfMass2 = PolygonUtil.
|
|
20483
|
+
const centerOfMass2 = PolygonUtil.getCenterOfPolygonByIndexWithOffsetFromCenterOfMass(
|
|
20484
|
+
polygonGeoJSON,
|
|
20485
|
+
menuMarkerIdx
|
|
20486
|
+
);
|
|
19317
20487
|
const menuPopup = this.generateMenuMarkerPopup(latlngs, featureGroup);
|
|
19318
20488
|
menuPopup.setLatLng(centerOfMass2).openOn(this.map);
|
|
19319
20489
|
});
|
|
@@ -19323,12 +20493,22 @@ class PolygonInteractionManager {
|
|
|
19323
20493
|
if (!popupContent) return;
|
|
19324
20494
|
setTimeout(() => {
|
|
19325
20495
|
const mapContainer = this.map.getContainer();
|
|
19326
|
-
const mapBounds = mapContainer.getBoundingClientRect();
|
|
19327
20496
|
const popupBounds = popupContent.getBoundingClientRect();
|
|
20497
|
+
const mapBounds = mapContainer.getBoundingClientRect();
|
|
20498
|
+
let adjustX = 0;
|
|
20499
|
+
let adjustY = 0;
|
|
19328
20500
|
if (popupBounds.left < mapBounds.left) {
|
|
19329
|
-
|
|
20501
|
+
adjustX = mapBounds.left - popupBounds.left;
|
|
19330
20502
|
} else if (popupBounds.right > mapBounds.right) {
|
|
19331
|
-
|
|
20503
|
+
adjustX = mapBounds.right - popupBounds.right;
|
|
20504
|
+
}
|
|
20505
|
+
if (popupBounds.top < mapBounds.top) {
|
|
20506
|
+
adjustY = mapBounds.top - popupBounds.top;
|
|
20507
|
+
} else if (popupBounds.bottom > mapBounds.bottom) {
|
|
20508
|
+
adjustY = mapBounds.bottom - popupBounds.bottom;
|
|
20509
|
+
}
|
|
20510
|
+
if (adjustX !== 0 || adjustY !== 0) {
|
|
20511
|
+
popupContent.style.transform = `translate(${adjustX}px, ${adjustY}px)`;
|
|
19332
20512
|
}
|
|
19333
20513
|
}, 0);
|
|
19334
20514
|
const container2 = this.map.getContainer();
|
|
@@ -19350,7 +20530,10 @@ class PolygonInteractionManager {
|
|
|
19350
20530
|
marker.options.zIndexOffset = this.config.markers.markerInfoIcon.zIndexOffset ?? this.config.markers.zIndexOffset;
|
|
19351
20531
|
marker.on("click", () => {
|
|
19352
20532
|
const infoPopup = this.generateInfoMarkerPopup(area2, perimeter);
|
|
19353
|
-
const centerOfMass2 = PolygonUtil.
|
|
20533
|
+
const centerOfMass2 = PolygonUtil.getCenterOfPolygonByIndexWithOffsetFromCenterOfMass(
|
|
20534
|
+
polygonGeoJSON,
|
|
20535
|
+
infoMarkerIdx
|
|
20536
|
+
);
|
|
19354
20537
|
infoPopup.setLatLng(centerOfMass2).openOn(this.map);
|
|
19355
20538
|
});
|
|
19356
20539
|
marker.on("popupopen", (e) => {
|
|
@@ -19387,6 +20570,7 @@ class PolygonInteractionManager {
|
|
|
19387
20570
|
this._activeMarker = marker;
|
|
19388
20571
|
});
|
|
19389
20572
|
marker.on("click", (e) => {
|
|
20573
|
+
var _a2, _b2;
|
|
19390
20574
|
if (this.modeManager.isInOffMode()) {
|
|
19391
20575
|
if (this.isEdgeDeletionModifierKeyPressed(e.originalEvent)) {
|
|
19392
20576
|
const polygonLayer = featureGroup.getLayers().find((layer) => layer instanceof L$1.Polygon);
|
|
@@ -19395,6 +20579,12 @@ class PolygonInteractionManager {
|
|
|
19395
20579
|
}
|
|
19396
20580
|
} else {
|
|
19397
20581
|
if (i === deleteMarkerIdx && this.config.markers.deleteMarker) {
|
|
20582
|
+
if (this.shouldSuppressDeleteMarkerClick()) {
|
|
20583
|
+
const original = e.originalEvent;
|
|
20584
|
+
(_a2 = original == null ? void 0 : original.preventDefault) == null ? void 0 : _a2.call(original);
|
|
20585
|
+
(_b2 = original == null ? void 0 : original.stopPropagation) == null ? void 0 : _b2.call(original);
|
|
20586
|
+
return;
|
|
20587
|
+
}
|
|
19398
20588
|
this.map.closePopup();
|
|
19399
20589
|
this.removeFeatureGroup(featureGroup);
|
|
19400
20590
|
this.polygonInformation.createPolygonInformationStorage(this.getFeatureGroups());
|
|
@@ -19634,7 +20824,7 @@ class PolygonInteractionManager {
|
|
|
19634
20824
|
});
|
|
19635
20825
|
const newPolygon = this.turfHelper.getMultiPolygon([coords]);
|
|
19636
20826
|
this.removeFeatureGroup(featureGroup);
|
|
19637
|
-
this.
|
|
20827
|
+
this.emitPolygonUpdated({
|
|
19638
20828
|
operation: "removeHole",
|
|
19639
20829
|
polygon: newPolygon
|
|
19640
20830
|
});
|
|
@@ -19760,6 +20950,9 @@ class PolygonInteractionManager {
|
|
|
19760
20950
|
this.currentDragPolygon = polygon2;
|
|
19761
20951
|
});
|
|
19762
20952
|
polygon2.on("pointerdown", (e) => {
|
|
20953
|
+
if (this.transformModeActive) {
|
|
20954
|
+
return;
|
|
20955
|
+
}
|
|
19763
20956
|
if (!this.modeManager.isInOffMode()) {
|
|
19764
20957
|
L$1.DomEvent.stopPropagation(e);
|
|
19765
20958
|
this.map.fire("pointerdown", e);
|
|
@@ -19900,7 +21093,7 @@ class PolygonInteractionManager {
|
|
|
19900
21093
|
const polydrawPolygon = parentPolygon;
|
|
19901
21094
|
const optimizationLevel = polydrawPolygon._polydrawOptimizationLevel || 0;
|
|
19902
21095
|
this.removeFeatureGroup(parentFeatureGroup);
|
|
19903
|
-
this.
|
|
21096
|
+
this.emitPolygonUpdated({
|
|
19904
21097
|
operation: "addVertex",
|
|
19905
21098
|
polygon: newPolygon,
|
|
19906
21099
|
optimizationLevel
|
|
@@ -20000,7 +21193,7 @@ class PolygonInteractionManager {
|
|
|
20000
21193
|
this.removeFeatureGroup(currentFeatureGroup);
|
|
20001
21194
|
}
|
|
20002
21195
|
const newPolygon = this.turfHelper.getMultiPolygon([coords]);
|
|
20003
|
-
this.
|
|
21196
|
+
this.emitPolygonUpdated({
|
|
20004
21197
|
operation: "removeVertex",
|
|
20005
21198
|
polygon: newPolygon
|
|
20006
21199
|
});
|
|
@@ -20025,7 +21218,7 @@ class PolygonInteractionManager {
|
|
|
20025
21218
|
}
|
|
20026
21219
|
const posarrays = polygonLayer.getLatLngs();
|
|
20027
21220
|
let length2 = 0;
|
|
20028
|
-
const
|
|
21221
|
+
const markers = layers.filter((layer) => layer instanceof L$1.Marker);
|
|
20029
21222
|
if (posarrays.length > 1) {
|
|
20030
21223
|
for (let index = 0; index < posarrays.length; index++) {
|
|
20031
21224
|
testarray = [];
|
|
@@ -20034,16 +21227,16 @@ class PolygonInteractionManager {
|
|
|
20034
21227
|
if (posarrays[0].length > 1) {
|
|
20035
21228
|
for (let i = 0; i < posarrays[0].length; i++) {
|
|
20036
21229
|
for (let j = 0; j < posarrays[0][i].length; j++) {
|
|
20037
|
-
if (
|
|
20038
|
-
testarray.push(
|
|
21230
|
+
if (markers[j]) {
|
|
21231
|
+
testarray.push(markers[j].getLatLng());
|
|
20039
21232
|
}
|
|
20040
21233
|
}
|
|
20041
21234
|
hole.push(testarray);
|
|
20042
21235
|
}
|
|
20043
21236
|
} else {
|
|
20044
21237
|
for (let j = 0; j < posarrays[0][0].length; j++) {
|
|
20045
|
-
if (
|
|
20046
|
-
testarray.push(
|
|
21238
|
+
if (markers[j]) {
|
|
21239
|
+
testarray.push(markers[j].getLatLng());
|
|
20047
21240
|
}
|
|
20048
21241
|
}
|
|
20049
21242
|
hole.push(testarray);
|
|
@@ -20052,8 +21245,8 @@ class PolygonInteractionManager {
|
|
|
20052
21245
|
} else {
|
|
20053
21246
|
length2 += posarrays[index - 1].length;
|
|
20054
21247
|
for (let j = length2; j < posarrays[index][0].length + length2; j++) {
|
|
20055
|
-
if (
|
|
20056
|
-
testarray.push(
|
|
21248
|
+
if (markers[j]) {
|
|
21249
|
+
testarray.push(markers[j].getLatLng());
|
|
20057
21250
|
}
|
|
20058
21251
|
}
|
|
20059
21252
|
hole.push(testarray);
|
|
@@ -20068,22 +21261,22 @@ class PolygonInteractionManager {
|
|
|
20068
21261
|
if (index === 0) {
|
|
20069
21262
|
if (posarrays[0][index].length > 1) {
|
|
20070
21263
|
for (let j = 0; j < posarrays[0][index].length; j++) {
|
|
20071
|
-
if (
|
|
20072
|
-
testarray.push(
|
|
21264
|
+
if (markers[j]) {
|
|
21265
|
+
testarray.push(markers[j].getLatLng());
|
|
20073
21266
|
}
|
|
20074
21267
|
}
|
|
20075
21268
|
} else {
|
|
20076
21269
|
for (let j = 0; j < posarrays[0][0].length; j++) {
|
|
20077
|
-
if (
|
|
20078
|
-
testarray.push(
|
|
21270
|
+
if (markers[j]) {
|
|
21271
|
+
testarray.push(markers[j].getLatLng());
|
|
20079
21272
|
}
|
|
20080
21273
|
}
|
|
20081
21274
|
}
|
|
20082
21275
|
} else {
|
|
20083
21276
|
length22 += posarrays[0][index - 1].length;
|
|
20084
21277
|
for (let j = length22; j < posarrays[0][index].length + length22; j++) {
|
|
20085
|
-
if (
|
|
20086
|
-
testarray.push(
|
|
21278
|
+
if (markers[j]) {
|
|
21279
|
+
testarray.push(markers[j].getLatLng());
|
|
20087
21280
|
}
|
|
20088
21281
|
}
|
|
20089
21282
|
}
|
|
@@ -20106,7 +21299,7 @@ class PolygonInteractionManager {
|
|
|
20106
21299
|
if (this.turfHelper.hasKinks(feature2)) {
|
|
20107
21300
|
const unkink = this.turfHelper.getKinks(feature2);
|
|
20108
21301
|
for (const polygon2 of unkink) {
|
|
20109
|
-
this.
|
|
21302
|
+
this.emitPolygonUpdated({
|
|
20110
21303
|
operation: "markerDrag",
|
|
20111
21304
|
polygon: this.turfHelper.getTurfPolygon(polygon2),
|
|
20112
21305
|
allowMerge: true,
|
|
@@ -20116,7 +21309,7 @@ class PolygonInteractionManager {
|
|
|
20116
21309
|
});
|
|
20117
21310
|
}
|
|
20118
21311
|
} else {
|
|
20119
|
-
this.
|
|
21312
|
+
this.emitPolygonUpdated({
|
|
20120
21313
|
operation: "markerDrag",
|
|
20121
21314
|
polygon: feature2,
|
|
20122
21315
|
allowMerge: true,
|
|
@@ -20133,7 +21326,7 @@ class PolygonInteractionManager {
|
|
|
20133
21326
|
if (this.turfHelper.hasKinks(feature2)) {
|
|
20134
21327
|
const unkink = this.turfHelper.getKinks(feature2);
|
|
20135
21328
|
for (const polygon2 of unkink) {
|
|
20136
|
-
this.
|
|
21329
|
+
this.emitPolygonUpdated({
|
|
20137
21330
|
operation: "markerDrag",
|
|
20138
21331
|
polygon: this.turfHelper.getTurfPolygon(polygon2),
|
|
20139
21332
|
allowMerge: false
|
|
@@ -20141,7 +21334,7 @@ class PolygonInteractionManager {
|
|
|
20141
21334
|
});
|
|
20142
21335
|
}
|
|
20143
21336
|
} else {
|
|
20144
|
-
this.
|
|
21337
|
+
this.emitPolygonUpdated({
|
|
20145
21338
|
operation: "markerDrag",
|
|
20146
21339
|
polygon: feature2,
|
|
20147
21340
|
allowMerge: false
|
|
@@ -20250,7 +21443,7 @@ class PolygonInteractionManager {
|
|
|
20250
21443
|
}
|
|
20251
21444
|
this.removeFeatureGroup(featureGroup);
|
|
20252
21445
|
const feature2 = this.turfHelper.getTurfPolygon(newGeoJSON);
|
|
20253
|
-
this.
|
|
21446
|
+
this.emitPolygonUpdated({
|
|
20254
21447
|
operation: "polygonDrag",
|
|
20255
21448
|
polygon: feature2,
|
|
20256
21449
|
allowMerge: true
|
|
@@ -20402,7 +21595,7 @@ class PolygonInteractionManager {
|
|
|
20402
21595
|
const coords = this.turfHelper.getCoords(difference3);
|
|
20403
21596
|
for (const coordSet of coords) {
|
|
20404
21597
|
const individualPolygon = this.turfHelper.getMultiPolygon([coordSet]);
|
|
20405
|
-
this.
|
|
21598
|
+
this.emitPolygonUpdated({
|
|
20406
21599
|
operation: "modifierSubtract",
|
|
20407
21600
|
polygon: this.turfHelper.getTurfPolygon(individualPolygon),
|
|
20408
21601
|
allowMerge: false
|
|
@@ -20414,7 +21607,7 @@ class PolygonInteractionManager {
|
|
|
20414
21607
|
if (!isTestEnvironment()) {
|
|
20415
21608
|
console.warn("Failed to perform difference operation:", differenceError);
|
|
20416
21609
|
}
|
|
20417
|
-
this.
|
|
21610
|
+
this.emitPolygonUpdated({
|
|
20418
21611
|
operation: "modifierSubtractFallback",
|
|
20419
21612
|
polygon: existingPolygon,
|
|
20420
21613
|
allowMerge: false
|
|
@@ -20522,25 +21715,25 @@ class PolygonInteractionManager {
|
|
|
20522
21715
|
);
|
|
20523
21716
|
return nearestPointIdx;
|
|
20524
21717
|
}
|
|
20525
|
-
ensureMarkerSeparation(polygonLength,
|
|
21718
|
+
ensureMarkerSeparation(polygonLength, markers) {
|
|
20526
21719
|
const enabledMarkers = [];
|
|
20527
|
-
if (
|
|
20528
|
-
enabledMarkers.push({ type: "menu", index:
|
|
21720
|
+
if (markers.menu.enabled) {
|
|
21721
|
+
enabledMarkers.push({ type: "menu", index: markers.menu.index });
|
|
20529
21722
|
}
|
|
20530
|
-
if (
|
|
20531
|
-
enabledMarkers.push({ type: "delete", index:
|
|
21723
|
+
if (markers.delete.enabled) {
|
|
21724
|
+
enabledMarkers.push({ type: "delete", index: markers.delete.index });
|
|
20532
21725
|
}
|
|
20533
|
-
if (
|
|
20534
|
-
enabledMarkers.push({ type: "info", index:
|
|
21726
|
+
if (markers.info.enabled) {
|
|
21727
|
+
enabledMarkers.push({ type: "info", index: markers.info.index });
|
|
20535
21728
|
}
|
|
20536
21729
|
if (enabledMarkers.length < 2) {
|
|
20537
21730
|
return {
|
|
20538
|
-
menu:
|
|
20539
|
-
delete:
|
|
20540
|
-
info:
|
|
21731
|
+
menu: markers.menu.index,
|
|
21732
|
+
delete: markers.delete.index,
|
|
21733
|
+
info: markers.info.index
|
|
20541
21734
|
};
|
|
20542
21735
|
}
|
|
20543
|
-
const resolvedIndices = { ...
|
|
21736
|
+
const resolvedIndices = { ...markers };
|
|
20544
21737
|
const usedIndices = /* @__PURE__ */ new Set();
|
|
20545
21738
|
const processingOrder = ["info", "delete", "menu"];
|
|
20546
21739
|
for (const markerType of processingOrder) {
|
|
@@ -20612,120 +21805,141 @@ class PolygonInteractionManager {
|
|
|
20612
21805
|
});
|
|
20613
21806
|
}
|
|
20614
21807
|
generateMenuMarkerPopup(latLngs, featureGroup) {
|
|
20615
|
-
const
|
|
20616
|
-
|
|
20617
|
-
|
|
20618
|
-
|
|
20619
|
-
|
|
20620
|
-
|
|
20621
|
-
|
|
20622
|
-
|
|
20623
|
-
|
|
20624
|
-
|
|
20625
|
-
|
|
20626
|
-
|
|
20627
|
-
|
|
20628
|
-
|
|
20629
|
-
|
|
20630
|
-
|
|
20631
|
-
|
|
20632
|
-
|
|
20633
|
-
|
|
20634
|
-
|
|
20635
|
-
|
|
20636
|
-
|
|
20637
|
-
|
|
20638
|
-
|
|
20639
|
-
|
|
20640
|
-
|
|
20641
|
-
outerWrapper.
|
|
20642
|
-
|
|
20643
|
-
|
|
20644
|
-
|
|
20645
|
-
|
|
20646
|
-
|
|
20647
|
-
|
|
20648
|
-
|
|
20649
|
-
|
|
20650
|
-
|
|
21808
|
+
const buttons = [];
|
|
21809
|
+
const menuOps = this.config.menuOperations;
|
|
21810
|
+
if (menuOps.simplify.enabled) {
|
|
21811
|
+
buttons.push(PopupFactory.createMenuButton("simplify", "Simplify", ["simplify"]));
|
|
21812
|
+
}
|
|
21813
|
+
if (menuOps.doubleElbows.enabled) {
|
|
21814
|
+
buttons.push(
|
|
21815
|
+
PopupFactory.createMenuButton("doubleElbows", "DoubleElbows", ["double-elbows"])
|
|
21816
|
+
);
|
|
21817
|
+
}
|
|
21818
|
+
if (menuOps.bbox.enabled) {
|
|
21819
|
+
buttons.push(PopupFactory.createMenuButton("bbox", "Bounding box", ["bbox"]));
|
|
21820
|
+
}
|
|
21821
|
+
if (menuOps.bezier.enabled) {
|
|
21822
|
+
buttons.push(
|
|
21823
|
+
PopupFactory.createMenuButton("bezier", "Curve", ["bezier"], {
|
|
21824
|
+
alphaBanner: true
|
|
21825
|
+
})
|
|
21826
|
+
);
|
|
21827
|
+
}
|
|
21828
|
+
if (menuOps.scale.enabled) {
|
|
21829
|
+
buttons.push(PopupFactory.createMenuButton("scale", "Scale", ["transform-scale"]));
|
|
21830
|
+
}
|
|
21831
|
+
if (menuOps.rotate.enabled) {
|
|
21832
|
+
buttons.push(PopupFactory.createMenuButton("rotate", "Rotate", ["transform-rotate"]));
|
|
21833
|
+
}
|
|
21834
|
+
const outerWrapper = PopupFactory.buildMenuPopup(buttons);
|
|
21835
|
+
const closeBtn = outerWrapper.querySelector(".marker-menu-close");
|
|
21836
|
+
if (closeBtn) {
|
|
21837
|
+
const handleClose = (event) => {
|
|
21838
|
+
event.stopPropagation();
|
|
21839
|
+
event.preventDefault();
|
|
21840
|
+
if (this._openMenuPopup) {
|
|
21841
|
+
this.map.closePopup(this._openMenuPopup);
|
|
21842
|
+
this._openMenuPopup = null;
|
|
21843
|
+
} else {
|
|
21844
|
+
this.map.closePopup();
|
|
21845
|
+
}
|
|
21846
|
+
};
|
|
21847
|
+
closeBtn.addEventListener("click", handleClose);
|
|
21848
|
+
closeBtn.addEventListener("touchend", handleClose, { passive: false });
|
|
21849
|
+
}
|
|
20651
21850
|
const closePopupIfOpen = () => {
|
|
20652
21851
|
if (this._openMenuPopup) {
|
|
20653
21852
|
this.map.closePopup(this._openMenuPopup);
|
|
20654
21853
|
this._openMenuPopup = null;
|
|
20655
21854
|
}
|
|
20656
21855
|
};
|
|
20657
|
-
|
|
20658
|
-
|
|
20659
|
-
|
|
20660
|
-
|
|
20661
|
-
action
|
|
20662
|
-
|
|
20663
|
-
|
|
20664
|
-
|
|
20665
|
-
|
|
20666
|
-
|
|
20667
|
-
simplify3.onclick = () => {
|
|
20668
|
-
this.eventManager.emit("polydraw:menu:action", {
|
|
20669
|
-
action: "simplify",
|
|
20670
|
-
latLngs,
|
|
20671
|
-
featureGroup
|
|
21856
|
+
const attachMenuActionHandler = (button, action) => {
|
|
21857
|
+
button.addEventListener("touchend", (e) => {
|
|
21858
|
+
e.preventDefault();
|
|
21859
|
+
e.stopPropagation();
|
|
21860
|
+
this.eventManager.emit("polydraw:menu:action", {
|
|
21861
|
+
action,
|
|
21862
|
+
latLngs,
|
|
21863
|
+
featureGroup
|
|
21864
|
+
});
|
|
21865
|
+
closePopupIfOpen();
|
|
20672
21866
|
});
|
|
20673
|
-
|
|
21867
|
+
button.onclick = () => {
|
|
21868
|
+
this.eventManager.emit("polydraw:menu:action", {
|
|
21869
|
+
action,
|
|
21870
|
+
latLngs,
|
|
21871
|
+
featureGroup
|
|
21872
|
+
});
|
|
21873
|
+
closePopupIfOpen();
|
|
21874
|
+
};
|
|
20674
21875
|
};
|
|
20675
|
-
|
|
20676
|
-
|
|
20677
|
-
|
|
20678
|
-
|
|
20679
|
-
|
|
20680
|
-
|
|
20681
|
-
|
|
20682
|
-
|
|
20683
|
-
|
|
20684
|
-
|
|
20685
|
-
|
|
20686
|
-
|
|
20687
|
-
|
|
20688
|
-
|
|
20689
|
-
|
|
20690
|
-
|
|
20691
|
-
|
|
21876
|
+
const startTransform = (mode) => {
|
|
21877
|
+
const existing = this.transformControllers.get(featureGroup);
|
|
21878
|
+
if (existing) {
|
|
21879
|
+
existing.cancel();
|
|
21880
|
+
existing.destroy();
|
|
21881
|
+
this.transformControllers.delete(featureGroup);
|
|
21882
|
+
}
|
|
21883
|
+
try {
|
|
21884
|
+
const controller = new PolygonTransformController(this.map, featureGroup, mode, () => {
|
|
21885
|
+
try {
|
|
21886
|
+
const polygonLayer = featureGroup.getLayers().find((l) => l instanceof L$1.Polygon);
|
|
21887
|
+
if (!polygonLayer) return;
|
|
21888
|
+
const newGeoJSON = polygonLayer.toGeoJSON();
|
|
21889
|
+
this.removeFeatureGroup(featureGroup);
|
|
21890
|
+
this.emitPolygonUpdated({
|
|
21891
|
+
operation: "transform",
|
|
21892
|
+
polygon: this.turfHelper.getTurfPolygon(newGeoJSON),
|
|
21893
|
+
allowMerge: true
|
|
21894
|
+
});
|
|
21895
|
+
} finally {
|
|
21896
|
+
controller.destroy();
|
|
21897
|
+
this.transformControllers.delete(featureGroup);
|
|
21898
|
+
this.transformModeActive = false;
|
|
21899
|
+
}
|
|
21900
|
+
});
|
|
21901
|
+
this.transformControllers.set(featureGroup, controller);
|
|
21902
|
+
const polyLayer = featureGroup.getLayers().find((l) => l instanceof L$1.Polygon);
|
|
21903
|
+
if (polyLayer) this.setMarkerVisibility(polyLayer, false);
|
|
21904
|
+
this.transformModeActive = true;
|
|
21905
|
+
} catch {
|
|
21906
|
+
}
|
|
20692
21907
|
};
|
|
20693
|
-
|
|
20694
|
-
|
|
20695
|
-
|
|
20696
|
-
|
|
20697
|
-
|
|
20698
|
-
|
|
20699
|
-
featureGroup
|
|
20700
|
-
});
|
|
20701
|
-
closePopupIfOpen();
|
|
20702
|
-
});
|
|
20703
|
-
doubleElbows.onclick = () => {
|
|
20704
|
-
this.eventManager.emit("polydraw:menu:action", {
|
|
20705
|
-
action: "doubleElbows",
|
|
20706
|
-
latLngs,
|
|
20707
|
-
featureGroup
|
|
21908
|
+
const attachTransformHandler = (button, mode) => {
|
|
21909
|
+
button.addEventListener("touchend", (e) => {
|
|
21910
|
+
e.preventDefault();
|
|
21911
|
+
e.stopPropagation();
|
|
21912
|
+
startTransform(mode);
|
|
21913
|
+
closePopupIfOpen();
|
|
20708
21914
|
});
|
|
20709
|
-
|
|
21915
|
+
button.onclick = () => {
|
|
21916
|
+
startTransform(mode);
|
|
21917
|
+
closePopupIfOpen();
|
|
21918
|
+
};
|
|
20710
21919
|
};
|
|
20711
|
-
|
|
20712
|
-
|
|
20713
|
-
|
|
20714
|
-
|
|
20715
|
-
|
|
20716
|
-
|
|
20717
|
-
|
|
20718
|
-
|
|
20719
|
-
|
|
21920
|
+
buttons.forEach((button) => {
|
|
21921
|
+
const actionId = button.getAttribute("data-action-id");
|
|
21922
|
+
switch (actionId) {
|
|
21923
|
+
case "simplify":
|
|
21924
|
+
attachMenuActionHandler(button, "simplify");
|
|
21925
|
+
break;
|
|
21926
|
+
case "doubleElbows":
|
|
21927
|
+
attachMenuActionHandler(button, "doubleElbows");
|
|
21928
|
+
break;
|
|
21929
|
+
case "bbox":
|
|
21930
|
+
attachMenuActionHandler(button, "bbox");
|
|
21931
|
+
break;
|
|
21932
|
+
case "bezier":
|
|
21933
|
+
attachMenuActionHandler(button, "bezier");
|
|
21934
|
+
break;
|
|
21935
|
+
case "scale":
|
|
21936
|
+
attachTransformHandler(button, "scale");
|
|
21937
|
+
break;
|
|
21938
|
+
case "rotate":
|
|
21939
|
+
attachTransformHandler(button, "rotate");
|
|
21940
|
+
break;
|
|
21941
|
+
}
|
|
20720
21942
|
});
|
|
20721
|
-
bezier2.onclick = () => {
|
|
20722
|
-
this.eventManager.emit("polydraw:menu:action", {
|
|
20723
|
-
action: "bezier",
|
|
20724
|
-
latLngs,
|
|
20725
|
-
featureGroup
|
|
20726
|
-
});
|
|
20727
|
-
closePopupIfOpen();
|
|
20728
|
-
};
|
|
20729
21943
|
L$1.DomEvent.disableClickPropagation(outerWrapper);
|
|
20730
21944
|
outerWrapper.style.pointerEvents = "auto";
|
|
20731
21945
|
outerWrapper.querySelectorAll(".marker-menu-button").forEach((btn) => {
|
|
@@ -20734,7 +21948,7 @@ class PolygonInteractionManager {
|
|
|
20734
21948
|
});
|
|
20735
21949
|
const isMobile = window.innerWidth <= 600;
|
|
20736
21950
|
const popup = leafletAdapter.createPopup({
|
|
20737
|
-
closeButton:
|
|
21951
|
+
closeButton: false,
|
|
20738
21952
|
autoClose: true,
|
|
20739
21953
|
className: `menu-popup${isMobile ? " mobile-popup" : ""}`
|
|
20740
21954
|
}).setContent(outerWrapper);
|
|
@@ -21101,6 +22315,7 @@ class PolygonMutationManager {
|
|
|
21101
22315
|
}
|
|
21102
22316
|
polygon2._polydrawOptimizationLevel = visualOptimizationLevel;
|
|
21103
22317
|
featureGroup.addLayer(polygon2);
|
|
22318
|
+
this.interactionManager.suppressDeleteMarkerClicks(250);
|
|
21104
22319
|
} catch (error) {
|
|
21105
22320
|
return { success: false, error: "Failed to create polygon layer" };
|
|
21106
22321
|
}
|
|
@@ -21610,12 +22825,12 @@ class PolygonMutationManager {
|
|
|
21610
22825
|
getMarkerIndex(latlngs, position) {
|
|
21611
22826
|
return 0;
|
|
21612
22827
|
}
|
|
21613
|
-
ensureMarkerSeparation(polygonLength,
|
|
22828
|
+
ensureMarkerSeparation(polygonLength, markers) {
|
|
21614
22829
|
var _a2, _b2, _c;
|
|
21615
22830
|
return {
|
|
21616
|
-
menu: ((_a2 =
|
|
21617
|
-
delete: ((_b2 =
|
|
21618
|
-
info: ((_c =
|
|
22831
|
+
menu: ((_a2 = markers.menu) == null ? void 0 : _a2.index) ?? 0,
|
|
22832
|
+
delete: ((_b2 = markers.delete) == null ? void 0 : _b2.index) ?? 1,
|
|
22833
|
+
info: ((_c = markers.info) == null ? void 0 : _c.index) ?? 2
|
|
21619
22834
|
};
|
|
21620
22835
|
}
|
|
21621
22836
|
findAlternativeMarkerPosition(polygonLength, originalIndex, usedIndices) {
|
|
@@ -22133,6 +23348,23 @@ class CoordinateUtils {
|
|
|
22133
23348
|
// return false;
|
|
22134
23349
|
// }
|
|
22135
23350
|
}
|
|
23351
|
+
function deepMerge(target, ...sources) {
|
|
23352
|
+
if (!sources.length) return target;
|
|
23353
|
+
for (const source of sources) {
|
|
23354
|
+
if (!source) continue;
|
|
23355
|
+
for (const key in source) {
|
|
23356
|
+
const sourceValue = source[key];
|
|
23357
|
+
const targetValue = target[key];
|
|
23358
|
+
if (sourceValue && typeof sourceValue === "object" && !Array.isArray(sourceValue)) {
|
|
23359
|
+
const base = targetValue && typeof targetValue === "object" && !Array.isArray(targetValue) ? targetValue : {};
|
|
23360
|
+
target[key] = deepMerge(base, sourceValue);
|
|
23361
|
+
} else if (sourceValue !== void 0) {
|
|
23362
|
+
target[key] = sourceValue;
|
|
23363
|
+
}
|
|
23364
|
+
}
|
|
23365
|
+
}
|
|
23366
|
+
return target;
|
|
23367
|
+
}
|
|
22136
23368
|
class Polydraw extends L$1.Control {
|
|
22137
23369
|
constructor(options) {
|
|
22138
23370
|
super(options);
|
|
@@ -22161,20 +23393,21 @@ class Polydraw extends L$1.Control {
|
|
|
22161
23393
|
__publicField(this, "_boundPointerUp");
|
|
22162
23394
|
__publicField(this, "_lastTapTime", 0);
|
|
22163
23395
|
__publicField(this, "_tapTimeout", null);
|
|
23396
|
+
__publicField(this, "supportsPointerEvents", typeof window !== "undefined" && "PointerEvent" in window);
|
|
22164
23397
|
/**
|
|
22165
23398
|
* Updates map interactions based on the current drawing mode.
|
|
22166
23399
|
*/
|
|
22167
23400
|
__publicField(this, "_handleActivateToggle", () => {
|
|
22168
23401
|
const container = this.getContainer();
|
|
22169
23402
|
if (!container) return;
|
|
22170
|
-
const
|
|
22171
|
-
if (leafletAdapter.domUtil.hasClass(
|
|
22172
|
-
leafletAdapter.domUtil.removeClass(
|
|
23403
|
+
const activateButton = container.querySelector(".icon-activate");
|
|
23404
|
+
if (leafletAdapter.domUtil.hasClass(activateButton, "active")) {
|
|
23405
|
+
leafletAdapter.domUtil.removeClass(activateButton, "active");
|
|
22173
23406
|
if (this.subContainer) {
|
|
22174
23407
|
this.subContainer.style.maxHeight = "0px";
|
|
22175
23408
|
}
|
|
22176
23409
|
} else {
|
|
22177
|
-
leafletAdapter.domUtil.addClass(
|
|
23410
|
+
leafletAdapter.domUtil.addClass(activateButton, "active");
|
|
22178
23411
|
if (this.subContainer) {
|
|
22179
23412
|
this.subContainer.style.maxHeight = "250px";
|
|
22180
23413
|
}
|
|
@@ -22228,6 +23461,18 @@ class Polydraw extends L$1.Control {
|
|
|
22228
23461
|
this.setDrawMode(DrawMode.PointToPoint);
|
|
22229
23462
|
this.polygonInformation.saveCurrentState();
|
|
22230
23463
|
});
|
|
23464
|
+
__publicField(this, "_handlePointToPointSubtractClick", (e) => {
|
|
23465
|
+
if (e) {
|
|
23466
|
+
e.preventDefault();
|
|
23467
|
+
e.stopPropagation();
|
|
23468
|
+
}
|
|
23469
|
+
if (this.modeManager.getCurrentMode() === DrawMode.PointToPointSubtract) {
|
|
23470
|
+
this.setDrawMode(DrawMode.Off);
|
|
23471
|
+
return;
|
|
23472
|
+
}
|
|
23473
|
+
this.setDrawMode(DrawMode.PointToPointSubtract);
|
|
23474
|
+
this.polygonInformation.saveCurrentState();
|
|
23475
|
+
});
|
|
22231
23476
|
/**
|
|
22232
23477
|
* Handle marker hover when modifier key is held - event handler version
|
|
22233
23478
|
*/
|
|
@@ -22251,11 +23496,11 @@ class Polydraw extends L$1.Control {
|
|
|
22251
23496
|
element.classList.remove("edge-deletion-hover");
|
|
22252
23497
|
}
|
|
22253
23498
|
});
|
|
22254
|
-
|
|
23499
|
+
const baseDefaults = structuredClone(defaultConfig);
|
|
23500
|
+
this.config = deepMerge(baseDefaults, (options == null ? void 0 : options.config) ?? {});
|
|
22255
23501
|
if (options == null ? void 0 : options.configPath) {
|
|
22256
23502
|
this.loadExternalConfig(options.configPath, options == null ? void 0 : options.config);
|
|
22257
23503
|
} else {
|
|
22258
|
-
this.config = { ...defaultConfig, ...(options == null ? void 0 : options.config) || {} };
|
|
22259
23504
|
this.initializeComponents();
|
|
22260
23505
|
}
|
|
22261
23506
|
}
|
|
@@ -22279,6 +23524,7 @@ class Polydraw extends L$1.Control {
|
|
|
22279
23524
|
this.initializeUI(container);
|
|
22280
23525
|
this.createTracer();
|
|
22281
23526
|
this.initializeManagers();
|
|
23527
|
+
this.setDrawMode(this.config.defaultMode);
|
|
22282
23528
|
this.setupEventListeners();
|
|
22283
23529
|
return container;
|
|
22284
23530
|
}
|
|
@@ -22352,6 +23598,29 @@ class Polydraw extends L$1.Control {
|
|
|
22352
23598
|
}
|
|
22353
23599
|
}
|
|
22354
23600
|
}
|
|
23601
|
+
/**
|
|
23602
|
+
* Adds predefined polygons from GeoJSON to the map.
|
|
23603
|
+
* @param geojsonFeatures - An array of GeoJSON Polygon or MultiPolygon features.
|
|
23604
|
+
* @param options - Optional parameters, including visual optimization level.
|
|
23605
|
+
*/
|
|
23606
|
+
async addPredefinedGeoJSONs(geojsonFeatures, options) {
|
|
23607
|
+
for (const geojsonFeature of geojsonFeatures) {
|
|
23608
|
+
const { type, coordinates } = geojsonFeature.geometry;
|
|
23609
|
+
if (type === "MultiPolygon") {
|
|
23610
|
+
for (const polygonCoords of coordinates) {
|
|
23611
|
+
const latLngs = polygonCoords.map(
|
|
23612
|
+
(ring) => ring.map((point2) => L$1.latLng(point2[1], point2[0]))
|
|
23613
|
+
);
|
|
23614
|
+
await this.addPredefinedPolygon([latLngs], options);
|
|
23615
|
+
}
|
|
23616
|
+
} else if (type === "Polygon") {
|
|
23617
|
+
const latLngs = coordinates.map(
|
|
23618
|
+
(ring) => ring.map((point2) => L$1.latLng(point2[1], point2[0]))
|
|
23619
|
+
);
|
|
23620
|
+
await this.addPredefinedPolygon([latLngs], options);
|
|
23621
|
+
}
|
|
23622
|
+
}
|
|
23623
|
+
}
|
|
22355
23624
|
/**
|
|
22356
23625
|
* Sets the current drawing mode.
|
|
22357
23626
|
* @param mode - The drawing mode to set.
|
|
@@ -22359,12 +23628,12 @@ class Polydraw extends L$1.Control {
|
|
|
22359
23628
|
setDrawMode(mode) {
|
|
22360
23629
|
const previousMode = this.drawMode;
|
|
22361
23630
|
this._updateDrawModeState(mode);
|
|
22362
|
-
if (previousMode === DrawMode.PointToPoint && mode !== DrawMode.PointToPoint) {
|
|
23631
|
+
if ((previousMode === DrawMode.PointToPoint || previousMode === DrawMode.PointToPointSubtract) && mode !== DrawMode.PointToPoint && mode !== DrawMode.PointToPointSubtract) {
|
|
22363
23632
|
this.polygonDrawManager.clearP2pMarkers();
|
|
22364
23633
|
this.stopDraw();
|
|
22365
23634
|
} else if (mode === DrawMode.Off) {
|
|
22366
23635
|
this.stopDraw();
|
|
22367
|
-
} else if (mode !== DrawMode.PointToPoint) {
|
|
23636
|
+
} else if (mode !== DrawMode.PointToPoint && mode !== DrawMode.PointToPointSubtract) {
|
|
22368
23637
|
this.stopDraw();
|
|
22369
23638
|
}
|
|
22370
23639
|
if (this.map) {
|
|
@@ -22441,7 +23710,8 @@ class Polydraw extends L$1.Control {
|
|
|
22441
23710
|
this._handleDrawClick,
|
|
22442
23711
|
this._handleSubtractClick,
|
|
22443
23712
|
this._handleEraseClick,
|
|
22444
|
-
this._handlePointToPointClick
|
|
23713
|
+
this._handlePointToPointClick,
|
|
23714
|
+
this._handlePointToPointSubtractClick
|
|
22445
23715
|
);
|
|
22446
23716
|
this.ensureButtonTouchResponsiveness(container);
|
|
22447
23717
|
const uiUpdateListener = (mode) => {
|
|
@@ -22484,10 +23754,14 @@ class Polydraw extends L$1.Control {
|
|
|
22484
23754
|
this.eventManager.on("polydraw:polygon:created", async (data) => {
|
|
22485
23755
|
this.stopDraw();
|
|
22486
23756
|
if (data.isPointToPoint) {
|
|
22487
|
-
|
|
22488
|
-
|
|
22489
|
-
|
|
22490
|
-
|
|
23757
|
+
if (data.mode === DrawMode.PointToPointSubtract) {
|
|
23758
|
+
await this.polygonMutationManager.subtractPolygon(data.polygon);
|
|
23759
|
+
} else {
|
|
23760
|
+
await this.polygonMutationManager.addPolygon(data.polygon, {
|
|
23761
|
+
simplify: false,
|
|
23762
|
+
noMerge: false
|
|
23763
|
+
});
|
|
23764
|
+
}
|
|
22491
23765
|
} else {
|
|
22492
23766
|
await this.handleFreehandDrawCompletion(data.polygon);
|
|
22493
23767
|
}
|
|
@@ -22495,7 +23769,7 @@ class Polydraw extends L$1.Control {
|
|
|
22495
23769
|
});
|
|
22496
23770
|
this.eventManager.on("polydraw:draw:cancel", () => {
|
|
22497
23771
|
this.stopDraw();
|
|
22498
|
-
this.setDrawMode(
|
|
23772
|
+
this.setDrawMode(this.config.defaultMode);
|
|
22499
23773
|
});
|
|
22500
23774
|
}
|
|
22501
23775
|
/**
|
|
@@ -22547,18 +23821,18 @@ class Polydraw extends L$1.Control {
|
|
|
22547
23821
|
);
|
|
22548
23822
|
}
|
|
22549
23823
|
const externalConfig = await response.json();
|
|
22550
|
-
this.config =
|
|
22551
|
-
|
|
22552
|
-
|
|
22553
|
-
|
|
22554
|
-
|
|
23824
|
+
this.config = deepMerge(
|
|
23825
|
+
structuredClone(defaultConfig),
|
|
23826
|
+
externalConfig ?? {},
|
|
23827
|
+
inlineConfig ?? {}
|
|
23828
|
+
);
|
|
22555
23829
|
this.initializeComponents();
|
|
22556
23830
|
} catch (error) {
|
|
22557
23831
|
console.warn(
|
|
22558
23832
|
"Failed to load external config, falling back to default + inline config:",
|
|
22559
23833
|
error
|
|
22560
23834
|
);
|
|
22561
|
-
this.config =
|
|
23835
|
+
this.config = deepMerge(structuredClone(defaultConfig), inlineConfig ?? {});
|
|
22562
23836
|
this.initializeComponents();
|
|
22563
23837
|
}
|
|
22564
23838
|
}
|
|
@@ -22611,6 +23885,12 @@ class Polydraw extends L$1.Control {
|
|
|
22611
23885
|
dashArray: "5, 5"
|
|
22612
23886
|
});
|
|
22613
23887
|
break;
|
|
23888
|
+
case DrawMode.PointToPointSubtract:
|
|
23889
|
+
this.tracer.setStyle({
|
|
23890
|
+
color: this.config.colors.subtractLine,
|
|
23891
|
+
dashArray: "5, 5"
|
|
23892
|
+
});
|
|
23893
|
+
break;
|
|
22614
23894
|
}
|
|
22615
23895
|
} catch (error) {
|
|
22616
23896
|
}
|
|
@@ -22779,10 +24059,12 @@ class Polydraw extends L$1.Control {
|
|
|
22779
24059
|
this._lastTapTime = 0;
|
|
22780
24060
|
} else {
|
|
22781
24061
|
this._lastTapTime = currentTime;
|
|
22782
|
-
this.
|
|
22783
|
-
this.
|
|
22784
|
-
|
|
22785
|
-
|
|
24062
|
+
if (!this.supportsPointerEvents) {
|
|
24063
|
+
this._tapTimeout = window.setTimeout(() => {
|
|
24064
|
+
this.mouseDown(event);
|
|
24065
|
+
this._tapTimeout = null;
|
|
24066
|
+
}, 300);
|
|
24067
|
+
}
|
|
22786
24068
|
}
|
|
22787
24069
|
}
|
|
22788
24070
|
/**
|
|
@@ -22790,7 +24072,7 @@ class Polydraw extends L$1.Control {
|
|
|
22790
24072
|
* @param event - The touch event
|
|
22791
24073
|
*/
|
|
22792
24074
|
handleDoubleTap(event) {
|
|
22793
|
-
if (this.modeManager.getCurrentMode() !== DrawMode.PointToPoint) {
|
|
24075
|
+
if (this.modeManager.getCurrentMode() !== DrawMode.PointToPoint && this.modeManager.getCurrentMode() !== DrawMode.PointToPointSubtract) {
|
|
22794
24076
|
return;
|
|
22795
24077
|
}
|
|
22796
24078
|
this.polygonDrawManager.handleDoubleTap(event);
|
|
@@ -22815,7 +24097,7 @@ class Polydraw extends L$1.Control {
|
|
|
22815
24097
|
console.log("No coordinates extracted");
|
|
22816
24098
|
return;
|
|
22817
24099
|
}
|
|
22818
|
-
if (this.modeManager.getCurrentMode() === DrawMode.PointToPoint) {
|
|
24100
|
+
if (this.modeManager.getCurrentMode() === DrawMode.PointToPoint || this.modeManager.getCurrentMode() === DrawMode.PointToPointSubtract) {
|
|
22819
24101
|
console.log("Point-to-Point mode, calling handlePointToPointClick");
|
|
22820
24102
|
this.polygonDrawManager.handlePointToPointClick(clickLatLng);
|
|
22821
24103
|
return;
|
|
@@ -22955,7 +24237,7 @@ class Polydraw extends L$1.Control {
|
|
|
22955
24237
|
*/
|
|
22956
24238
|
handleKeyDown(e) {
|
|
22957
24239
|
if (e.key === "Escape") {
|
|
22958
|
-
if (this.modeManager.getCurrentMode() === DrawMode.PointToPoint) {
|
|
24240
|
+
if (this.modeManager.getCurrentMode() === DrawMode.PointToPoint || this.modeManager.getCurrentMode() === DrawMode.PointToPointSubtract) {
|
|
22959
24241
|
this.polygonDrawManager.cancelPointToPointDrawing();
|
|
22960
24242
|
}
|
|
22961
24243
|
}
|
|
@@ -23011,9 +24293,10 @@ class Polydraw extends L$1.Control {
|
|
|
23011
24293
|
* @param e - The mouse event.
|
|
23012
24294
|
*/
|
|
23013
24295
|
handleDoubleClick(e) {
|
|
23014
|
-
if (this.modeManager.getCurrentMode() !== DrawMode.PointToPoint) {
|
|
24296
|
+
if (this.modeManager.getCurrentMode() !== DrawMode.PointToPoint && this.modeManager.getCurrentMode() !== DrawMode.PointToPointSubtract) {
|
|
23015
24297
|
return;
|
|
23016
24298
|
}
|
|
24299
|
+
L$1.DomEvent.stop(e);
|
|
23017
24300
|
this.polygonDrawManager.handleDoubleClick(e);
|
|
23018
24301
|
}
|
|
23019
24302
|
/**
|
|
@@ -23060,11 +24343,32 @@ class Polydraw extends L$1.Control {
|
|
|
23060
24343
|
if (!activateButton) return;
|
|
23061
24344
|
const hasPolygons = this.arrayOfFeatureGroups.length > 0;
|
|
23062
24345
|
const isPanelClosed = !leafletAdapter.domUtil.hasClass(activateButton, "active");
|
|
23063
|
-
|
|
24346
|
+
const iconMarkup = leafletAdapter.domUtil.hasClass(activateButton, "active") ? activateButton.dataset.collapsedIcon : activateButton.dataset.activeIcon;
|
|
24347
|
+
if (iconMarkup) {
|
|
24348
|
+
this.applyActivateButtonIcon(activateButton, iconMarkup);
|
|
24349
|
+
}
|
|
24350
|
+
const hasIndicator = hasPolygons && isPanelClosed;
|
|
24351
|
+
if (hasIndicator) {
|
|
23064
24352
|
leafletAdapter.domUtil.addClass(activateButton, "polydraw-indicator-active");
|
|
23065
24353
|
} else {
|
|
23066
24354
|
leafletAdapter.domUtil.removeClass(activateButton, "polydraw-indicator-active");
|
|
23067
24355
|
}
|
|
24356
|
+
const baseBackground = this.config.colors.styles.controlButton.backgroundColor;
|
|
24357
|
+
const baseColor = this.config.colors.styles.controlButton.color;
|
|
24358
|
+
const indicatorBackground = this.config.colors.styles.indicatorActive.backgroundColor;
|
|
24359
|
+
activateButton.style.backgroundColor = hasIndicator ? indicatorBackground : baseBackground;
|
|
24360
|
+
activateButton.style.color = baseColor;
|
|
24361
|
+
}
|
|
24362
|
+
applyActivateButtonIcon(button, svgMarkup) {
|
|
24363
|
+
button.innerHTML = svgMarkup;
|
|
24364
|
+
const svgElement = button.querySelector("svg");
|
|
24365
|
+
if (!svgElement) return;
|
|
24366
|
+
svgElement.setAttribute("width", "24");
|
|
24367
|
+
svgElement.setAttribute("height", "24");
|
|
24368
|
+
svgElement.style.pointerEvents = "none";
|
|
24369
|
+
svgElement.querySelectorAll("*").forEach((el) => {
|
|
24370
|
+
el.style.pointerEvents = "none";
|
|
24371
|
+
});
|
|
23068
24372
|
}
|
|
23069
24373
|
}
|
|
23070
24374
|
if (typeof L$1 !== "undefined" && L$1.control) {
|