From 8f0d61895badf3616afc83e93792cd8efb62f656 Mon Sep 17 00:00:00 2001
From: Gwendolyn <me@gwendolyn.dev>
Date: Thu, 7 Dec 2023 12:06:50 +0100
Subject: [PATCH] only try to load .svg source files as svg overlay, don't
 recreate svg if it's already loaded

---
 src/c3nav/editor/static/editor/js/editor.js | 47 +++++++++++----------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/c3nav/editor/static/editor/js/editor.js b/src/c3nav/editor/static/editor/js/editor.js
index f3a583b0..bfc42a62 100644
--- a/src/c3nav/editor/static/editor/js/editor.js
+++ b/src/c3nav/editor/static/editor/js/editor.js
@@ -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]});