Don't use useless sphere clip-path when projection doesn't come from d3

Should fix the wrong display when opening the resulting svg in illustrator.
riatelab · Oct 4, 2024 · 3fc5db0 · 3fc5db0
1 parent 17e87ea
commit 3fc5db0
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 16 deletions.
diff --git a/src/components/MapRenderer/CategoricalChoroplethMapRenderer.tsx b/src/components/MapRenderer/CategoricalChoroplethMapRenderer.tsx
@@ -12,6 +12,7 @@ import d3 from '../../helpers/d3-custom';
 
 // Stores
 import { globalStore } from '../../store/GlobalStore';
+import { mapStore } from '../../store/MapStore';
 
 // Directives
 import bindData from '../../directives/bind-data';
@@ -58,7 +59,7 @@ export function categoricalChoroplethPolygonRenderer(
     stroke-opacity={layerDescription.strokeOpacity}
     stroke-linecap="round"
     stroke-linejoin="round"
-    clip-path="url(#clip-sphere)"
+    clip-path={mapStore.projection.type === 'd3' ? 'url(#clip-sphere)' : undefined}
     filter={mergeFilterIds(layerDescription)}
     shape-rendering={
       (layerDescription.strokeWidth === 0 || layerDescription.strokeOpacity === 0)
@@ -112,7 +113,7 @@ export function categoricalChoroplethPointRenderer(
     stroke-opacity={layerDescription.strokeOpacity}
     stroke-linecap="round"
     stroke-linejoin="round"
-    // clip-path="url(#clip-sphere)"
+    // clip-path={mapStore.projection.type === 'd3' ? 'url(#clip-sphere)' : undefined}
     filter={mergeFilterIds(layerDescription)}
     mgt:geometry-type={layerDescription.type}
     mgt:portrayal-type={layerDescription.representationType}
@@ -168,7 +169,7 @@ export function categoricalChoroplethLineRenderer(
     stroke-opacity={layerDescription.strokeOpacity}
     stroke-linecap="round"
     stroke-linejoin="round"
-    clip-path="url(#clip-sphere)"
+    clip-path={mapStore.projection.type === 'd3' ? 'url(#clip-sphere)' : undefined}
     filter={mergeFilterIds(layerDescription)}
     mgt:geometry-type={layerDescription.type}
     mgt:portrayal-type={layerDescription.representationType}

diff --git a/src/components/MapRenderer/ChoroplethMapRenderer.tsx b/src/components/MapRenderer/ChoroplethMapRenderer.tsx
@@ -14,6 +14,7 @@ import d3 from '../../helpers/d3-custom';
 
 // Stores
 import { globalStore } from '../../store/GlobalStore';
+import { mapStore } from '../../store/MapStore';
 
 // Directives
 import bindData from '../../directives/bind-data';
@@ -53,7 +54,7 @@ export function choroplethPolygonRenderer(
     stroke-opacity={layerDescription.strokeOpacity}
     stroke-linecap="round"
     stroke-linejoin="round"
-    clip-path="url(#clip-sphere)"
+    clip-path={mapStore.projection.type === 'd3' ? 'url(#clip-sphere)' : undefined}
     filter={mergeFilterIds(layerDescription)}
     shape-rendering={
       (layerDescription.strokeWidth === 0 || layerDescription.strokeOpacity === 0)
@@ -105,7 +106,7 @@ export function choroplethPointRenderer(
     stroke-opacity={layerDescription.strokeOpacity}
     stroke-linecap="round"
     stroke-linejoin="round"
-    // clip-path="url(#clip-sphere)"
+    // clip-path={mapStore.projection.type === 'd3' ? 'url(#clip-sphere)' : undefined}
     filter={mergeFilterIds(layerDescription)}
     mgt:geometry-type={layerDescription.type}
     mgt:portrayal-type={layerDescription.representationType}
@@ -159,7 +160,7 @@ export function choroplethLineRenderer(
     stroke-opacity={layerDescription.strokeOpacity}
     stroke-linecap="round"
     stroke-linejoin="round"
-    clip-path="url(#clip-sphere)"
+    clip-path={mapStore.projection.type === 'd3' ? 'url(#clip-sphere)' : undefined}
     filter={mergeFilterIds(layerDescription)}
     mgt:geometry-type={layerDescription.type}
     mgt:portrayal-type={layerDescription.representationType}

diff --git a/src/components/MapRenderer/DefaultMapRenderer.tsx b/src/components/MapRenderer/DefaultMapRenderer.tsx
@@ -11,6 +11,7 @@ import d3 from '../../helpers/d3-custom';
 
 // Stores
 import { globalStore } from '../../store/GlobalStore';
+import { mapStore } from '../../store/MapStore';
 
 // Directives
 import bindData from '../../directives/bind-data';
@@ -38,7 +39,7 @@ export function defaultPolygonRenderer(
     stroke-opacity={layerDescription.strokeOpacity}
     stroke-linecap="round"
     stroke-linejoin="round"
-    clip-path="url(#clip-sphere)"
+    clip-path={mapStore.projection.type === 'd3' ? 'url(#clip-sphere)' : undefined}
     filter={mergeFilterIds(layerDescription)}
     shape-rendering={
       (layerDescription.strokeWidth === 0 || layerDescription.strokeOpacity === 0)
@@ -80,7 +81,7 @@ export function defaultPolygonRendererMeshed(
     stroke-opacity={layerDescription.strokeOpacity}
     stroke-linecap="round"
     stroke-linejoin="round"
-    clip-path="url(#clip-sphere)"
+    clip-path={mapStore.projection.type === 'd3' ? 'url(#clip-sphere)' : undefined}
     filter={mergeFilterIds(layerDescription)}
     shape-rendering={layerDescription.shapeRendering}
     mgt:geometry-type={layerDescription.type}
@@ -116,7 +117,7 @@ export function defaultPointRenderer(
     stroke-opacity={layerDescription.strokeOpacity}
     stroke-linecap="round"
     stroke-linejoin="round"
-    // clip-path="url(#clip-sphere)"
+    // clip-path={mapStore.projection.type === 'd3' ? 'url(#clip-sphere)' : undefined}
     filter={mergeFilterIds(layerDescription)}
     mgt:geometry-type={layerDescription.type}
     mgt:portrayal-type={layerDescription.representationType}
@@ -155,7 +156,7 @@ export function defaultLineRenderer(
     stroke-opacity={layerDescription.strokeOpacity}
     stroke-linecap="round"
     stroke-linejoin="round"
-    clip-path="url(#clip-sphere)"
+    clip-path={mapStore.projection.type === 'd3' ? 'url(#clip-sphere)' : undefined}
     filter={mergeFilterIds(layerDescription)}
     mgt:geometry-type={layerDescription.type}
     mgt:portrayal-type={layerDescription.representationType}

diff --git a/src/components/MapRenderer/DiscontinuityMapRenderer.tsx b/src/components/MapRenderer/DiscontinuityMapRenderer.tsx
@@ -11,6 +11,7 @@ import { getClassifier } from '../../helpers/classification';
 
 // Stores
 import { globalStore } from '../../store/GlobalStore';
+import { mapStore } from '../../store/MapStore';
 
 // Directives
 import bindData from '../../directives/bind-data';
@@ -48,7 +49,7 @@ export default function discontinuityRenderer(
     stroke-opacity={layerDescription.strokeOpacity}
     stroke-linecap="round"
     stroke-linejoin="round"
-    clip-path="url(#clip-sphere)"
+    clip-path={mapStore.projection.type === 'd3' ? 'url(#clip-sphere)' : undefined}
     filter={mergeFilterIds(layerDescription)}
     mgt:geometry-type={layerDescription.type}
     mgt:portrayal-type={layerDescription.representationType}

diff --git a/src/components/MapRenderer/GraticuleRenderer.tsx b/src/components/MapRenderer/GraticuleRenderer.tsx
@@ -2,6 +2,7 @@ import { For, JSX } from 'solid-js';
 
 // Stores
 import { globalStore } from '../../store/GlobalStore';
+import { mapStore } from '../../store/MapStore';
 
 // Helpers
 import { mergeFilterIds } from './common.tsx';
@@ -30,7 +31,7 @@ export default function graticuleRenderer(layerDescription: LayerDescription): J
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-dasharray={layerDescription.strokeDasharray}
-    clip-path="url(#clip-sphere)"
+    clip-path={mapStore.projection.type === 'd3' ? 'url(#clip-sphere)' : undefined}
     filter={mergeFilterIds(layerDescription)}
     mgt:geometry-type={layerDescription.type}
     mgt:portrayal-type={layerDescription.representationType}

diff --git a/src/components/MapRenderer/GridRenderer.tsx b/src/components/MapRenderer/GridRenderer.tsx
@@ -11,6 +11,7 @@ import { mergeFilterIds } from './common.tsx';
 
 // Stores
 import { globalStore } from '../../store/GlobalStore';
+import { mapStore } from '../../store/MapStore';
 
 // Directives
 import bindData from '../../directives/bind-data';
@@ -50,7 +51,7 @@ export default function gridRenderer(
     stroke-opacity={layerDescription.strokeOpacity}
     stroke-linecap="round"
     stroke-linejoin="round"
-    clip-path="url(#clip-sphere)"
+    clip-path={mapStore.projection.type === 'd3' ? 'url(#clip-sphere)' : undefined}
     filter={mergeFilterIds(layerDescription)}
     shape-rendering={
       (layerDescription.strokeWidth === 0 || layerDescription.strokeOpacity === 0)

diff --git a/src/components/MapRenderer/LinksMapRenderer.tsx b/src/components/MapRenderer/LinksMapRenderer.tsx
@@ -13,6 +13,7 @@ import applyFilters from '../../helpers/filtering';
 
 // Stores
 import { globalStore } from '../../store/GlobalStore';
+import { mapStore } from '../../store/MapStore';
 
 // Directives
 import bindData from '../../directives/bind-data';
@@ -59,7 +60,7 @@ export default function linksRenderer(
       stroke-opacity={layerDescription.strokeOpacity}
       stroke-linecap="round"
       stroke-linejoin="round"
-      clip-path="url(#clip-sphere)"
+      clip-path={mapStore.projection.type === 'd3' ? 'url(#clip-sphere)' : undefined}
       filter={mergeFilterIds(layerDescription)}
       mgt:geometry-type={layerDescription.type}
       mgt:portrayal-type={layerDescription.representationType}
@@ -112,7 +113,7 @@ export default function linksRenderer(
     stroke-opacity={layerDescription.strokeOpacity}
     stroke-linecap="round"
     stroke-linejoin="round"
-    clip-path="url(#clip-sphere)"
+    clip-path={mapStore.projection.type === 'd3' ? 'url(#clip-sphere)' : undefined}
     filter={mergeFilterIds(layerDescription)}
     mgt:geometry-type={layerDescription.type}
     mgt:portrayal-type={layerDescription.representationType}

diff --git a/src/components/MapRenderer/SmoothedMapRenderer.tsx b/src/components/MapRenderer/SmoothedMapRenderer.tsx
@@ -11,6 +11,7 @@ import { mergeFilterIds } from './common.tsx';
 
 // Stores
 import { globalStore } from '../../store/GlobalStore';
+import { mapStore } from '../../store/MapStore';
 
 // Directives
 import bindData from '../../directives/bind-data';
@@ -50,7 +51,7 @@ export default function smoothedMapRenderer(
     stroke-opacity={layerDescription.strokeOpacity}
     stroke-linecap="round"
     stroke-linejoin="round"
-    clip-path="url(#clip-sphere)"
+    clip-path={mapStore.projection.type === 'd3' ? 'url(#clip-sphere)' : undefined}
     filter={mergeFilterIds(layerDescription)}
     shape-rendering={
       (layerDescription.strokeWidth === 0 || layerDescription.strokeOpacity === 0)