Add other missing d3 projections

Also reopen the projection selection modal with the current projection
selected in the dropdown menu if the current projection comes from d3

src/components/Modals/ProjectionSelection.tsx

@@ -13,7 +13,7 @@ import { HiOutlineGlobeAlt, HiSolidDocumentText } from 'solid-icons/hi';
 // Helpers
 import d3 from '../../helpers/d3-custom';
 import { useI18nContext } from '../../i18n/i18n-solid';
-import { camelToFlat, isFiniteNumber } from '../../helpers/common';
+import { camelToFlat, isFiniteNumber, unproxify } from '../../helpers/common';
 import { round } from '../../helpers/math';
 import {
   epsgDb, type EpsgDbEntryType,
@@ -24,16 +24,16 @@ import topojson from '../../helpers/topojson';
 import worldLand from '../../helpers/world-land';
 
 // Stores
-import { setMapStore } from '../../store/MapStore';
+import { mapStore, setMapStore } from '../../store/MapStore';
 
 // Sub-components
 import DropdownMenu from '../DropdownMenu.tsx';
 import InputFieldText from '../Inputs/InputText.tsx';
 import MessageBlock from '../MessageBlock.tsx';
+import InputFieldTextarea from '../Inputs/InputTextarea.tsx';
 
 // Types / Interfaces / Enums
 import type { GeoJSONFeatureCollection, ScoredResult } from '../../global.d';
-import InputFieldTextarea from '../Inputs/InputTextarea.tsx';
 
 const worldLandGeo = rewindLayer(
   topojson.feature(
@@ -58,6 +58,7 @@ const availableProjections = [
   // 'Chamberlin',
   'ChamberlinAfrica',
   'Collignon',
+  'ConicConformal',
   'ConicEqualArea',
   'ConicEquidistant',
   'Craig',
@@ -83,6 +84,7 @@ const availableProjections = [
   'Ginzburg6',
   'Ginzburg8',
   'Ginzburg9',
+  'Gnomonic',
   'Gringorten',
   'Guyou',
   'Hammer',
@@ -130,13 +132,15 @@ const availableProjections = [
   'SinuMollweide',
   'Sinusoidal',
   'Times',
+  'TransverseMercator',
   'VanDerGrinten',
   'VanDerGrinten2',
   'VanDerGrinten3',
   'VanDerGrinten4',
   'Wagner',
   'Wagner4',
   'Wagner6',
+  // 'Wagner7',
   'Wiechel',
   'Winkel3',
 ].sort();
@@ -212,10 +216,10 @@ function DemoMap(
   const graticule = d3.geoGraticule().step([20, 20])();
 
   const makeMap = () => {
-    refCanvasNode.width = props.width;
-    refCanvasNode.height = props.height;
-    const context = refCanvasNode.getContext('2d')!;
-    const projection = d3[`geo${props.projectionName}`]()
+    refCanvasNode!.width = props.width;
+    refCanvasNode!.height = props.height;
+    const context = refCanvasNode!.getContext('2d')!;
+    const projection = d3[`geo${props.projectionName}` as keyof typeof d3]()
       .fitExtent([[10, 10], [350, 250]], sphere);
     const path = d3.geoPath(projection, context);
     context.beginPath();
@@ -251,6 +255,8 @@ function DemoMap(
 export default function ProjectionSelection() : JSX.Element {
   const { LL } = useI18nContext();
 
+  const curProjInfo = unproxify(mapStore.projection as never);
+
   const [
     currentTab,
     setCurrentTab,
@@ -259,7 +265,11 @@ export default function ProjectionSelection() : JSX.Element {
   const [
     selectedGlobalProjection,
     setSelectedGlobalProjection,
-  ] = createSignal<string>('Airy');
+  ] = createSignal<string>(
+    curProjInfo.type === 'd3' && availableProjections.includes(curProjInfo.name)
+      ? curProjInfo.name
+      : 'Airy',
+  );
   // Signals for "epsg" tab
   const [
     matchingProjections,
@@ -339,7 +349,10 @@ export default function ProjectionSelection() : JSX.Element {
           <DropdownMenu
             id={'projection-selection_global-projection-dropdown'}
             entries={projectionEntries}
-            defaultEntry={projectionEntries[0]}
+            defaultEntry={
+              projectionEntries
+                .find((d) => d.name === camelToFlat(selectedGlobalProjection()))!
+            }
             onChange={(v) => {
               setSelectedGlobalProjection(v);
             }}
@@ -376,7 +389,7 @@ export default function ProjectionSelection() : JSX.Element {
             placeholder={'e.g. EPSG:3035, Lambert-93, Martinique 1938 / UTM zone 20N, ...'}
             onKeyUp={(value) => {
               setMatchingProjections(findMatchingProjections(value));
-              console.log(matchingProjections());
+              // console.log(matchingProjections());
             }}
           />
           <div class="is-flex" style={{ 'column-gap': '1em', height: '29vh' }}>

src/helpers/d3-custom.ts

@@ -53,13 +53,16 @@ import {
   geoStream,
   geoTransform,
   // Projections that will be available in the application
+  geoConicConformal,
   geoConicEqualArea,
   geoConicEquidistant,
   geoEquirectangular,
+  geoGnomonic,
   geoNaturalEarth1,
   geoMercator,
   geoOrthographic,
   geoEqualEarth,
+  geoTransverseMercator,
 } from 'd3-geo';
 import {
   geoStitch,
@@ -118,7 +121,7 @@ import {
   geoLagrange,
   geoLarrivee,
   geoLaskowski,
-  // geoLittrow,
+  geoLittrow,
   geoLoximuthal,
   geoMiller,
   geoModifiedStereographicLee,
@@ -149,6 +152,7 @@ import {
   geoWagner,
   geoWagner4,
   geoWagner6,
+  geoWagner7,
   geoWiechel,
   geoWinkel3,
 } from 'd3-geo-projection';
@@ -341,6 +345,7 @@ export default {
   // geoChamberlin,
   geoChamberlinAfrica,
   geoCollignon,
+  geoConicConformal,
   geoConicEqualArea,
   geoConicEquidistant,
   geoCraig,
@@ -365,6 +370,7 @@ export default {
   geoGinzburg6,
   geoGinzburg8,
   geoGinzburg9,
+  geoGnomonic,
   geoGringorten,
   geoGuyou,
   geoHammer,
@@ -384,7 +390,7 @@ export default {
   geoLagrange,
   geoLarrivee,
   geoLaskowski,
-  // geoLittrow,
+  geoLittrow,
   geoLoximuthal,
   geoMercator,
   geoMiller,
@@ -410,13 +416,15 @@ export default {
   geoSinusoidal,
   geoStitch,
   geoTimes,
+  geoTransverseMercator,
   geoVanDerGrinten,
   geoVanDerGrinten2,
   geoVanDerGrinten3,
   geoVanDerGrinten4,
   geoWagner,
   geoWagner4,
   geoWagner6,
+  geoWagner7,
   geoWiechel,
   geoWinkel3,
   geoArea,