2025-summer/team-3
12
Fork 0
Code Issues Pull requests Projects Releases Activity

only try to load .svg source files as svg overlay, don't recreate svg if it's already loaded

Browse source
This commit is contained in:
Gwendolyn 2023-12-07 12:06:50 +01:00
parent ff1df86e2e
commit 8f0d61895b
1 changed files with 25 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/c3nav/editor/static/editor/js/editor.js
View file

@ -95,36 +95,40 @@ editor = {
c3nav_api.get('mapdata/sources')
.then(async sources => {
const svg_promises = [];
for (var i = 0; i < sources.length; i++) {
const source = sources[i];
editor.sources[source.id] = source;
source.layer = L.imageOverlay('/editor/sourceimage/' + source.name, L.GeoJSON.coordsToLatLngs(source.bounds), {opacity: 0.3});
editor._sources_control.addOverlay(source.layer, `${source.name} (image overlay)`);
source.svg_el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
source.svg_el.setAttribute('xmlns', "http://www.w3.org/2000/svg");
source.svg_layer = L.svgOverlay(source.svg_el, L.GeoJSON.coordsToLatLngs(source.bounds), {opacity: 0.3});
editor._sources_control.addOverlay(source.svg_layer, `${source.name} (svg overlay)`);
source.svg_layer.on('add', async function () {
let promise;
if (source.svg_promise) {
promise = source.svg_promise;
} else {
source.svg_promise = promise = fetch(`/editor/sourceimage/${source.name}`)
const bounds = L.GeoJSON.coordsToLatLngs(source.bounds);
options = {opacity: 0.3};
source.layer = L.imageOverlay('/editor/sourceimage/' + source.name, bounds, options);
const is_svg = source.name.endsWith('.svg');
editor._sources_control.addOverlay(source.layer, is_svg ? `${source.name} (image overlay)` : source.name);
if (is_svg) {
source.svg_el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
source.svg_el.setAttribute('xmlns', "http://www.w3.org/2000/svg");
source.svg_layer = L.svgOverlay(source.svg_el, bounds, options);
editor._sources_control.addOverlay(source.svg_layer, `${source.name} (svg overlay)`);
source.svg_layer.on('add', function () {
if (source.svg_promise) return;
source.svg_promise = fetch(`/editor/sourceimage/${source.name}`)
.then(r => {
if (!r.ok) {
throw 'could not load source svg';
}
return r.text();
})
.then(src => {
const root = (new DOMParser).parseFromString(src, 'image/svg+xml').documentElement;
for (const attr of root.attributes) {
source.svg_el.attributes.setNamedItem(attr.cloneNode(true));
}
source.svg_el.replaceChildren(...root.children);
});
}
let src = await promise;
const root = (new DOMParser).parseFromString(src, 'image/svg+xml').documentElement;
for (const attr of root.attributes) {
source.svg_el.attributes.setNamedItem(attr.cloneNode(true));
}
source.svg_el.replaceChildren(...root.children);
})
})
}
}
if (sources.length) editor._sources_control.addTo(editor.map);
})
@ -459,7 +463,6 @@ editor = {
editor._source_image_layer.setBounds(bounds)
} else {
editor._source_image_layer = L.imageOverlay('/editor/sourceimage/'+content.find('[name=name]').val(), bounds, {opacity: 0.3, zIndex: 10000});
// TODO: svg support
editor._source_image_layer.addTo(editor.map);
if (content.find('[data-new]').length) {
editor.map.fitBounds(bounds, {padding: [30, 50]});