Skip to content

Commit 6fa8c24

Browse files
dee077dee077
committed
[fix] Add south west and north east bounds in params on user actions
1 parent b75bfec commit 6fa8c24

File tree

2 files changed

+61
-144
lines changed

2 files changed

+61
-144
lines changed

‎src/js/netjsongraph.render.js‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -411,17 +411,16 @@ class NetJSONGraphRender {
411411
self.leaflet._zoomAnimated = false;
412412

413413
try {
414-
const params = new URLSearchParams(window.location.search);
415-
const latParam = params.get("lat");
416-
const lngParam = params.get("lng");
417-
const zoomParam = params.get("zoom");
418-
const lat = parseFloat(latParam);
419-
const lng = parseFloat(lngParam);
420-
const zoom = parseFloat(zoomParam);
421-
self.leaflet.invalidateSize();
422-
self.leaflet.setView([lat, lng], zoom);
423-
} catch (err) {
424-
console.warn("Failed to fetch data from params params:", err);
414+
if (self.utils && typeof self.utils.restoreBoundsFromUrl === "function") {
415+
self.utils.restoreBoundsFromUrl(self);
416+
}
417+
if (self.utils && typeof self.utils.enableBoundsUrlSync === "function") {
418+
const debounceMs = 300;
419+
const precision = 6;
420+
self._destroyUrlSync = self.utils.enableBoundsUrlSync(self, { debounceMs, precision });
421+
}
422+
} catch (e) {
423+
console.warn("bbox URL restore/sync failed", e);
425424
}
426425

427426
self.config.geoOptions = self.utils.deepMergeObj(

‎src/js/netjsongraph.util.js‎

Lines changed: 51 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -1097,173 +1097,91 @@ class NetJSONGraphUtil {
10971097
};
10981098
}
10991099

1100-
parseUrlParams() {
1100+
parseUrlBounds() {
11011101
const params = new URLSearchParams(window.location.search);
11021102
const getFloat = (k) => {
11031103
const v = params.get(k);
11041104
return v == null ? null : parseFloat(v);
11051105
};
1106+
const swLat = getFloat('swLat');
1107+
const swLng = getFloat('swLng');
1108+
const neLat = getFloat('neLat');
1109+
const neLng = getFloat('neLng');
11061110
return {
1107-
swLat: getFloat("swLat"),
1108-
swLng: getFloat("swLng"),
1109-
neLat: getFloat("neLat"),
1110-
neLng: getFloat("neLng"),
1111-
lat: getFloat("lat"),
1112-
lng: getFloat("lng"),
1113-
node: params.has("node") ? decodeURIComponent(params.get("node")) : null,
1114-
mode: params.has("mode") ? params.get("mode") : null,
1111+
swLat, swLng, neLat, neLng,
1112+
hasBounds:
1113+
swLat !== null &&
1114+
swLng !== null &&
1115+
neLat !== null &&
1116+
neLng !== null,
11151117
};
11161118
}
11171119

1118-
writeBBoxToUrl(self, {usePush = false, precision = 6} = {}) {
1120+
writeBoundsToUrl(self, { precision = 6 } = {}) {
11191121
if (!self || !self.leaflet) return;
11201122
try {
1121-
const bounds = self.leaflet.getBounds();
1122-
if (!bounds || !bounds.isValid()) return;
1123-
const sw = bounds.getSouthWest();
1124-
const ne = bounds.getNorthEast();
1123+
const b = self.leaflet.getBounds();
1124+
if (!b || !b.isValid()) return;
11251125

1126+
const sw = b.getSouthWest();
1127+
const ne = b.getNorthEast();
11261128
const url = new URL(window.location.href);
11271129
const params = url.searchParams;
11281130

1129-
params.set("swLat", (+sw.lat).toFixed(precision));
1130-
params.set("swLng", (+sw.lng).toFixed(precision));
1131-
params.set("neLat", (+ne.lat).toFixed(precision));
1132-
params.set("neLng", (+ne.lng).toFixed(precision));
1131+
params.set('swLat', (+sw.lat).toFixed(precision));
1132+
params.set('swLng', (+sw.lng).toFixed(precision));
1133+
params.set('neLat', (+ne.lat).toFixed(precision));
1134+
params.set('neLng', (+ne.lng).toFixed(precision));
11331135

11341136
url.search = params.toString();
1135-
if (usePush) window.history.pushState({}, "", url.toString());
1136-
else window.history.replaceState({}, "", url.toString());
1137+
window.history.replaceState({}, '', url.toString());
11371138
} catch (err) {
1138-
console.warn("writeBBoxToUrl failed", err);
1139+
console.warn('writeBoundsToUrl error', err);
11391140
}
11401141
}
11411142

1142-
async restoreViewFromUrl(self, {openFloorplanOverlay} = {}) {
1143-
if (!self) return;
1144-
const p = this.parseUrlParams();
1145-
1146-
if (
1147-
p.mode === "floorplan" &&
1148-
p.floorUrl &&
1149-
typeof openFloorplanOverlay === "function"
1150-
) {
1151-
const floorGraphOrPromise = openFloorplanOverlay(p.floorUrl);
1152-
const floorGraph =
1153-
floorGraphOrPromise instanceof Promise
1154-
? await floorGraphOrPromise
1155-
: floorGraphOrPromise;
1156-
if (!floorGraph || !floorGraph.leaflet) return;
1157-
floorGraph.leaflet.invalidateSize();
1158-
1159-
if (
1160-
p.swLat != null &&
1161-
p.swLng != null &&
1162-
p.neLat != null &&
1163-
p.neLng != null
1164-
) {
1165-
floorGraph.leaflet.fitBounds(
1166-
self.leaflet.latLngBounds([p.swLat, p.swLng], [p.neLat, p.neLng]),
1167-
{animate: false},
1168-
);
1169-
} else if (p.lat != null && p.lng != null) {
1170-
floorGraph.leaflet.setView(
1171-
[p.lat, p.lng],
1172-
p.zoom != null ? p.zoom : floorGraph.leaflet.getZoom(),
1173-
{animate: false},
1174-
);
1175-
}
1176-
1177-
if (p.node) {
1178-
if (floorGraph.event && typeof floorGraph.event.once === "function") {
1179-
floorGraph.event.once("onReady", () => {
1180-
this._openNodePopup(floorGraph, p.node);
1181-
});
1182-
} else {
1183-
setTimeout(() => this._openNodePopup(floorGraph, p.node), 200);
1143+
restoreBoundsFromUrl(self) {
1144+
if (!self || !self.leaflet) return;
1145+
try {
1146+
const b = this.parseUrlBounds();
1147+
if (!b.hasBounds) return;
1148+
this._suspendUrlWrites = true;
1149+
self.leaflet.whenReady(() => {
1150+
if (typeof self.leaflet.invalidateSize === 'function') {
1151+
self.leaflet.invalidateSize();
11841152
}
1185-
}
1186-
return;
1187-
}
1188-
1189-
if (!self.leaflet) return;
1190-
self.leaflet.invalidateSize();
1191-
1192-
if (
1193-
p.swLat != null &&
1194-
p.swLng != null &&
1195-
p.neLat != null &&
1196-
p.neLng != null
1197-
) {
1198-
self.leaflet.fitBounds(
1199-
self.leaflet.latLngBounds([p.swLat, p.swLng], [p.neLat, p.neLng]),
1200-
{animate: false},
1201-
);
1202-
} else if (p.lat != null && p.lng != null) {
1203-
self.leaflet.setView(
1204-
[p.lat, p.lng],
1205-
p.zoom != null ? p.zoom : self.leaflet.getZoom(),
1206-
{animate: false},
1207-
);
1208-
}
1209-
1210-
if (p.node) {
1211-
if (self.event && typeof self.event.once === "function") {
1212-
self.event.once("onReady", () => {
1213-
this._openNodePopup(self, p.node);
1214-
});
1215-
} else {
1216-
setTimeout(() => this._openNodePopup(self, p.node), 200);
1217-
}
1153+
self.leaflet.fitBounds(
1154+
L.latLngBounds([b.swLat, b.swLng], [b.neLat, b.neLng]),
1155+
{ animate: false },
1156+
);
1157+
setTimeout(() => {
1158+
this._suspendUrlWrites = false;
1159+
}, 50);
1160+
});
1161+
} catch (e) {
1162+
console.warn('restoreBoundsFromUrl failed', e);
12181163
}
12191164
}
12201165

1221-
enableBBoxUrlSync(
1222-
self,
1223-
{debounceMs = 300, usePush = false, precision = 6} = {},
1224-
) {
1166+
enableBoundsUrlSync(self, { debounceMs = 300, precision = 6 } = {}) {
12251167
if (!self || !self.leaflet) return () => {};
12261168
let timer = null;
1227-
let suspended = false;
12281169
const write = () => {
1229-
if (suspended) return;
1230-
const bounds = self.leaflet.getBounds();
1231-
if (!bounds || !bounds.isValid()) return;
1232-
const sw = bounds.getSouthWest();
1233-
const ne = bounds.getNorthEast();
1234-
1235-
const url = new URL(window.location.href);
1236-
const params = url.searchParams;
1237-
params.set("swLat", (+sw.lat).toFixed(precision));
1238-
params.set("swLng", (+sw.lng).toFixed(precision));
1239-
params.set("neLat", (+ne.lat).toFixed(precision));
1240-
params.set("neLng", (+ne.lng).toFixed(precision));
1241-
url.search = params.toString();
1242-
if (usePush) window.history.pushState({}, "", url.toString());
1243-
else window.history.replaceState({}, "", url.toString());
1170+
if (this._suspendUrlWrites) return;
1171+
this.writeBoundsToUrl(self, { precision });
12441172
};
12451173
const debounced = () => {
12461174
clearTimeout(timer);
12471175
timer = setTimeout(write, debounceMs);
12481176
};
1249-
self.leaflet.on("moveend", debounced);
1250-
self.leaflet.on("zoomend", debounced);
1251-
window.addEventListener("resize", debounced);
12521177

1253-
return {
1254-
disable() {
1255-
suspended = true;
1256-
},
1257-
enable() {
1258-
suspended = false;
1259-
debounced();
1260-
},
1261-
destroy() {
1262-
self.leaflet.off("moveend", debounced);
1263-
self.leaflet.off("zoomend", debounced);
1264-
window.removeEventListener("resize", debounced);
1265-
clearTimeout(timer);
1266-
},
1178+
self.leaflet.on('moveend', debounced);
1179+
self.leaflet.on('zoomend', debounced);
1180+
1181+
return () => {
1182+
self.leaflet.off('moveend', debounced);
1183+
self.leaflet.off('zoomend', debounced);
1184+
clearTimeout(timer);
12671185
};
12681186
}
12691187
}

0 commit comments

Comments
 (0)