add saving countries

src/lib/world-map/WorldMap.svelte

@@ -50,6 +50,8 @@
   }
 
   let frameEl;
+  let _paths = null;
+  let _g = null;
 
   function fitProjection(proj, w, h) {
     proj.fitSize([w, h], { type: 'Sphere' });
@@ -57,6 +59,15 @@
     proj.scale(s).translate([w / 2, h * 0.70]);
   }
 
+  function updateAllFills() {
+    if (!_paths || !_g) return;
+    const sel = getSelected();
+    _paths.attr('fill', d => sel.has(effId(d)) ? '#22c55e' : '#ffffff');
+    _g.selectAll('.micro-state').attr('fill', d => sel.has(effId(d)) ? '#22c55e' : '#ffffff');
+  }
+
+  $effect(updateAllFills);
+
   onMount(() => {
     const width = frameEl.clientWidth;
     const height = frameEl.clientHeight;
@@ -81,7 +92,7 @@
       .attr('width', width)
       .attr('height', height);
 
-    const g = svg.append('g');
+    _g = svg.append('g');
 
     const tooltip = d3.select(frameEl)
       .append('div')
@@ -90,7 +101,7 @@
 
     function updateFill(sel) {
       sel.attr('fill', d => getSelected().has(effId(d)) ? '#22c55e' : '#ffffff');
-      g.selectAll('.micro-state').attr('fill', d => getSelected().has(effId(d)) ? '#22c55e' : '#ffffff');
+      _g.selectAll('.micro-state').attr('fill', d => getSelected().has(effId(d)) ? '#22c55e' : '#ffffff');
     }
 
     function attachEvents(sel) {
@@ -113,24 +124,24 @@
         });
     }
 
-    const paths = g.selectAll('path')
+    _paths = _g.selectAll('path')
       .data(countries)
       .join('path')
       .attr('d', path)
       .attr('fill', '#ffffff')
       .attr('stroke', '#d4d4d4')
       .attr('stroke-width', 0.5);
-    attachEvents(paths);
+    attachEvents(_paths);
 
     function renderMicrostates() {
-      g.selectAll('.micro-state').remove();
+      _g.selectAll('.micro-state').remove();
       const threshold = Math.max(4, 16 / d3.zoomTransform(svg.node()).k);
-      paths.each(function (d) {
+      _paths.each(function (d) {
         if (effId(d) !== d.id) return;
         const { width, height } = this.getBBox();
         if (width < threshold && height < threshold) {
           const [cx, cy] = path.centroid(d);
-          const c = g.append('circle')
+          const c = _g.append('circle')
             .attr('class', 'micro-state')
             .datum(d)
             .attr('cx', cx)
@@ -149,7 +160,7 @@
     const zoom = d3.zoom()
       .scaleExtent([1, 32])
       .on('zoom', (event) => {
-        g.attr('transform', event.transform);
+        _g.attr('transform', event.transform);
         renderMicrostates();
       });
 
@@ -166,7 +177,7 @@
         const { width, height } = entry.contentRect;
         svg.attr('width', width).attr('height', height);
         fitProjection(projection, width, height);
-        const countryPaths = g.selectAll('path');
+        const countryPaths = _g.selectAll('path');
         countryPaths.attr('d', path);
         updateFill(countryPaths);
         renderMicrostates();