Skip to content

Commit fbdf5f0

Browse files
valentine195valentine195
committed
feat: Can now measure in segments by continuing to mod-click
1 parent cc0cb06 commit fbdf5f0

File tree

5 files changed

+218
-160
lines changed

5 files changed

+218
-160
lines changed

‎src/@types/map.d.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ declare abstract class BaseMap /* <
170170

171171
displaying: Map<string, boolean>;
172172
get displayed(): Marker[];
173-
173+
distanceAlongPolylines(polylines: L.Polyline[]): string;
174174
drawingLayer: L.LayerGroup;
175175

176176
featureLayer: L.FeatureGroup;
@@ -206,7 +206,7 @@ declare abstract class BaseMap /* <
206206
get plugin(): ObsidianLeaflet;
207207

208208
popup: Popup;
209-
previousDistanceLine: L.Polyline;
209+
previousDistanceLines: L.Polyline[];
210210

211211
readyForDrawings: boolean;
212212

@@ -320,7 +320,9 @@ declare abstract class BaseMap /* <
320320
on(name: "marker-deleted", callback: (marker: Marker) => void): EventRef;
321321
on(name: "markers-updated", callback: () => void): EventRef;
322322
on(name: "should-close-popup", callback: (source: Popup) => void): EventRef;
323+
on(name: "should-save", callback: () => void): EventRef;
323324
on(name: "lock", callback: () => void): EventRef;
325+
on(name: "ready-for-drawings", callback: () => void): EventRef;
324326
}
325327

326328
declare class RealMap extends BaseMap /* <L.TileLayer> */ {
@@ -401,9 +403,9 @@ declare class DivIconMarker extends L.Marker {
401403
declare class DistanceDisplay extends L.Control {
402404
controlEl: HTMLElement;
403405
textEl: HTMLSpanElement;
404-
get line(): L.Polyline;
406+
get lines(): L.Polyline[];
405407
map: BaseMapType;
406-
popups: [Popup, Popup];
408+
popups: Popup[];
407409
constructor(opts: L.ControlOptions, map: BaseMapType);
408410
initEvents(): void;
409411
onMouseEnter(): void;

‎src/controls/distance.ts

Lines changed: 71 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -8,88 +8,104 @@ const L = window[LeafletSymbol];
88

99
class DistanceDisplay extends L.Control {
1010
controlEl: HTMLElement;
11-
get line() {
12-
return this.map.previousDistanceLine;
11+
get lines() {
12+
return this.map.previousDistanceLines;
1313
}
14-
popups: [Popup, Popup];
14+
popups: Popup[] = [];
1515
textEl: HTMLSpanElement;
16+
getPopup() {
17+
return popup(this.map, null, {
18+
permanent: true,
19+
className: "leaflet-marker-link-popup",
20+
autoClose: false,
21+
closeButton: false,
22+
closeOnClick: false,
23+
autoPan: false
24+
});
25+
}
1626
constructor(opts: L.ControlOptions, public map: BaseMapType) {
1727
super(opts);
18-
this.popups = [
19-
popup(this.map, null, {
20-
permanent: true,
21-
className: "leaflet-marker-link-popup",
22-
autoClose: false,
23-
closeButton: false,
24-
closeOnClick: false,
25-
autoPan: false
26-
}),
27-
popup(this.map, null, {
28-
permanent: true,
29-
className: "leaflet-marker-link-popup",
30-
autoClose: false,
31-
closeButton: false,
32-
closeOnClick: false,
33-
autoPan: false
34-
})
35-
];
3628
}
3729
initEvents() {
3830
this.controlEl.onmouseenter = this.onMouseEnter.bind(this);
3931
this.controlEl.onclick = this.onClick.bind(this);
4032
this.controlEl.onmouseleave = this.onMouseLeave.bind(this);
4133
}
4234
onMouseEnter() {
43-
if (this.line) {
44-
const latlngs = this.line.getLatLngs() as L.LatLng[];
45-
46-
this.popups[0].setTarget(latlngs[0]).open(
47-
`[${latlngs[0].lat.toLocaleString("en-US", {
48-
maximumFractionDigits: LAT_LONG_DECIMALS
49-
})}, ${latlngs[0].lng.toLocaleString("en-US", {
50-
maximumFractionDigits: LAT_LONG_DECIMALS
51-
})}]`
35+
if (this.lines.length) {
36+
const latlng = this.lines[0].getLatLngs()[0] as L.LatLng;
37+
const start = this.getPopup().setTarget(
38+
this.lines[0].getLatLngs()[0] as L.LatLng
5239
);
53-
this.map.leafletInstance.openPopup(this.popups[0].leafletInstance);
54-
55-
this.popups[1].setTarget(latlngs[1]).open(
56-
`[${latlngs[1].lat.toLocaleString("en-US", {
40+
start.open(
41+
`[${latlng.lat.toLocaleString("en-US", {
5742
maximumFractionDigits: LAT_LONG_DECIMALS
58-
})}, ${latlngs[1].lng.toLocaleString("en-US", {
43+
})}, ${latlng.lng.toLocaleString("en-US", {
5944
maximumFractionDigits: LAT_LONG_DECIMALS
6045
})}]`
6146
);
62-
this.map.leafletInstance.openPopup(this.popups[1].leafletInstance);
47+
this.popups.push(start);
48+
this.map.leafletInstance.openPopup(start.leafletInstance);
6349

64-
this.line.setStyle({ color: "blue", dashArray: "4 1" });
65-
this.line.addTo(this.map.leafletInstance);
50+
for (let i = 0; i < this.lines.length; i++) {
51+
const line = this.lines[i];
52+
const latlngs = line.getLatLngs() as L.LatLng[];
53+
54+
const display = this.map.distanceAlongPolylines(
55+
this.lines.slice(0, i + 1)
56+
);
57+
const segment = this.map.distanceAlongPolylines([line]);
58+
59+
const popup = this.getPopup().setTarget(latlngs[1]);
60+
const element = createDiv();
61+
element.createSpan({ text: `${display} (${segment})` });
62+
element.createEl("br");
63+
element.createSpan({
64+
text: ` [${latlngs[1].lat.toLocaleString("en-US", {
65+
maximumFractionDigits: LAT_LONG_DECIMALS
66+
})}, ${latlngs[1].lng.toLocaleString("en-US", {
67+
maximumFractionDigits: LAT_LONG_DECIMALS
68+
})}]`
69+
});
70+
popup.open(element);
71+
this.map.leafletInstance.openPopup(popup.leafletInstance);
72+
this.popups.push(popup);
73+
74+
line.setStyle({ color: "blue", dashArray: "4 1" });
75+
line.addTo(this.map.leafletInstance);
76+
}
6677
}
6778
}
6879
onClick(evt: MouseEvent) {
6980
evt.stopPropagation();
7081
evt.preventDefault();
7182

72-
if (this.line) {
73-
this.map.leafletInstance.fitBounds(
74-
L.latLngBounds(
75-
this.line.getLatLngs()[0] as L.LatLng,
76-
this.line.getLatLngs()[1] as L.LatLng
77-
),
78-
{
79-
duration: 0.5,
80-
easeLinearity: 0.1,
81-
animate: true,
82-
padding: [5, 5]
83-
}
84-
);
83+
if (this.lines.length) {
84+
const group = new L.FeatureGroup();
85+
for (const line of this.lines) {
86+
new L.Polyline([
87+
line.getLatLngs()[0] as L.LatLng,
88+
line.getLatLngs()[1] as L.LatLng
89+
]).addTo(group);
90+
}
91+
this.map.leafletInstance.fitBounds(group.getBounds(), {
92+
duration: 0.5,
93+
easeLinearity: 0.1,
94+
animate: true,
95+
padding: [5, 5]
96+
});
8597
}
8698
}
8799
onMouseLeave() {
88-
if (this.line) {
89-
this.line.remove();
100+
if (this.lines) {
101+
for (const line of this.lines) {
102+
line.remove();
103+
}
104+
}
105+
for (const popup of this.popups) {
106+
this.map.leafletInstance.closePopup(popup.leafletInstance);
90107
}
91-
this.map.leafletInstance.closePopup(this.popups[0].leafletInstance);
92-
this.map.leafletInstance.closePopup(this.popups[1].leafletInstance);
108+
this.popups = [];
93109
}
94110
onAdd() {
95111
/* this.map = map; */

‎src/draw/polyline.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ export class Polyline extends Shape<L.Polyline> {
4747
this.redraw();
4848
}
4949
this.leafletInstance.on("click", (evt: L.LeafletMouseEvent) => {
50-
console.log("🚀 ~ file: polyline.ts:48 ~ evt:", evt);
5150
if (
5251
evt.originalEvent.getModifierState(MODIFIER_KEY) &&
5352
this.vertices.length > 1
@@ -69,6 +68,8 @@ export class Polyline extends Shape<L.Polyline> {
6968
}`
7069
);
7170
}
71+
//wtf??
72+
//@ts-ignore
7273
this.map.distanceDisplay.setText(`${total} ${this.map.unit}`);
7374
}
7475
});

0 commit comments

Comments
 (0)