From 3fc5db0ad14e01332b9da572f1a46828e4a1b82b Mon Sep 17 00:00:00 2001 From: Matthieu Viry Date: Fri, 4 Oct 2024 15:39:26 +0200 Subject: [PATCH] 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. --- .../MapRenderer/CategoricalChoroplethMapRenderer.tsx | 7 ++++--- src/components/MapRenderer/ChoroplethMapRenderer.tsx | 7 ++++--- src/components/MapRenderer/DefaultMapRenderer.tsx | 9 +++++---- src/components/MapRenderer/DiscontinuityMapRenderer.tsx | 3 ++- src/components/MapRenderer/GraticuleRenderer.tsx | 3 ++- src/components/MapRenderer/GridRenderer.tsx | 3 ++- src/components/MapRenderer/LinksMapRenderer.tsx | 5 +++-- src/components/MapRenderer/SmoothedMapRenderer.tsx | 3 ++- 8 files changed, 24 insertions(+), 16 deletions(-) diff --git a/src/components/MapRenderer/CategoricalChoroplethMapRenderer.tsx b/src/components/MapRenderer/CategoricalChoroplethMapRenderer.tsx index 6df4c0b9b..fcdba0466 100644 --- 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 index a7fa88592..ad01a131a 100644 --- 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 index 3bc3c866e..2021b2526 100644 --- 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 index 341c4342c..21c79f00b 100644 --- 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 index 4d67d6a6b..eec29d9fd 100644 --- 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 index 2b0b1bfc4..2f5d20612 100644 --- 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 index cd80c2a35..9f334d123 100644 --- 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 index f3dcf0d57..53cdad974 100644 --- 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)