feat(map): add country fill fade map setting

MichaelMakesGames · Feb 13, 2024 · 02e74ed · 02e74ed
1 parent 3153b4f
commit 02e74ed
Show file tree

Hide file tree

Showing 7 changed files with 130 additions and 29 deletions.
diff --git a/src/renderer/src/lib/ExportModal.svelte b/src/renderer/src/lib/ExportModal.svelte
@@ -8,7 +8,11 @@
 	} from '@skeletonlabs/skeleton';
 	import convertSvgToPng from './convertSvgToPng';
 	import type { MapData } from './map/data/processMapData';
-	import { getFillColorAttributes, resolveColor } from './map/mapUtils';
+	import {
+		approximateBorderFadeOpacity,
+		getFillColorAttributes,
+		resolveColor,
+	} from './map/mapUtils';
 	import { mapSettings } from './mapSettings';
 	import stellarMapsApi from './stellarMapsApi';
 	import { toastError } from './utils';
@@ -330,7 +334,13 @@
 								mapSettings: $mapSettings,
 								colors,
 								countryColors: border,
-								colorStack: [$mapSettings.borderColor, $mapSettings.borderFillColor],
+								colorStack: [
+									$mapSettings.borderColor,
+									approximateBorderFadeOpacity(
+										$mapSettings.borderFillColor,
+										$mapSettings.borderFillFade,
+									),
+								],
 							})}
 						/>
 						<path
@@ -339,7 +349,14 @@
 								mapSettings: $mapSettings,
 								colors,
 								countryColors: border,
-								colorStack: [$mapSettings.borderFillColor],
+								colorStack: [
+									// normally only use this approximation when for background colors
+									// but it helps this simplified preview reflect the map
+									approximateBorderFadeOpacity(
+										$mapSettings.borderFillColor,
+										$mapSettings.borderFillFade,
+									),
+								],
 							})}
 						/>
 					{/each}

diff --git a/src/renderer/src/lib/map/CountryBorders.svelte b/src/renderer/src/lib/map/CountryBorders.svelte
@@ -3,6 +3,7 @@
 	import Glow from './Glow.svelte';
 	import type { MapData } from './data/processMapData';
 	import {
+		approximateBorderFadeOpacity,
 		getFillColorAttributes,
 		getStrokeAttributes,
 		getStrokeColorAttributes,
@@ -26,13 +27,31 @@
 		<path
 			id="border-{border.countryId}-inner"
 			d={border.innerPath}
-			{...getFillColorAttributes({
-				mapSettings: $mapSettings,
-				colors,
-				countryColors: border,
-				colorStack: [$mapSettings.borderFillColor],
-			})}
+			{...$mapSettings.borderFillFade === 0
+				? getFillColorAttributes({
+						mapSettings: $mapSettings,
+						colors,
+						countryColors: border,
+						colorStack: [$mapSettings.borderFillColor],
+					})
+				: { fill: 'none' }}
 		/>
+		{#if $mapSettings.borderFillFade > 0}
+			<path
+				id="border-{border.countryId}-inner"
+				d={border.innerPath}
+				clip-path={`url(#border-${border.countryId}-inner-clip-path)`}
+				stroke-width={(1 - $mapSettings.borderFillFade) * 25}
+				filter="url(#fade)"
+				fill="none"
+				{...getStrokeColorAttributes({
+					mapSettings: $mapSettings,
+					colors,
+					countryColors: border,
+					colorStack: [$mapSettings.borderFillColor],
+				})}
+			/>
+		{/if}
 		{#each border.sectorBorders.filter(filterSectorBorders) as sectorBorder}
 			<Glow
 				enabled={sectorBorder.isUnionBorder && $mapSettings.unionBorderStroke.enabled
@@ -53,7 +72,13 @@
 						mapSettings: $mapSettings,
 						colors,
 						countryColors: border,
-						colorStack: [$mapSettings.sectorBorderColor, $mapSettings.borderFillColor],
+						colorStack: [
+							$mapSettings.sectorBorderColor,
+							approximateBorderFadeOpacity(
+								$mapSettings.borderFillColor,
+								$mapSettings.borderFillFade,
+							),
+						],
 					})}
 					fill="none"
 				/>
@@ -68,7 +93,10 @@
 					mapSettings: $mapSettings,
 					colors,
 					countryColors: border,
-					colorStack: [$mapSettings.borderColor, $mapSettings.borderFillColor],
+					colorStack: [
+						$mapSettings.borderColor,
+						approximateBorderFadeOpacity($mapSettings.borderFillColor, $mapSettings.borderFillFade),
+					],
 				})}
 				{filter}
 			/>

diff --git a/src/renderer/src/lib/map/Hyperlanes.svelte b/src/renderer/src/lib/map/Hyperlanes.svelte
@@ -2,7 +2,11 @@
 	import { isColorDynamic, mapSettings } from '../mapSettings';
 	import Glow from './Glow.svelte';
 	import type { MapData } from './data/processMapData';
-	import { getStrokeAttributes, getStrokeColorAttributes } from './mapUtils';
+	import {
+		approximateBorderFadeOpacity,
+		getStrokeAttributes,
+		getStrokeColorAttributes,
+	} from './mapUtils';
 
 	export let data: MapData;
 	export let colors: Record<string, string>;
@@ -79,7 +83,10 @@
 					mapSettings: $mapSettings,
 					colors,
 					countryColors: border,
-					colorStack: [$mapSettings.hyperlaneColor, $mapSettings.borderFillColor],
+					colorStack: [
+						$mapSettings.hyperlaneColor,
+						approximateBorderFadeOpacity($mapSettings.borderFillColor, $mapSettings.borderFillFade),
+					],
 				})}
 				{...getStrokeAttributes($mapSettings.hyperlaneStroke)}
 				{filter}
@@ -95,7 +102,10 @@
 					mapSettings: $mapSettings,
 					colors,
 					countryColors: border,
-					colorStack: [$mapSettings.hyperRelayColor, $mapSettings.borderFillColor],
+					colorStack: [
+						$mapSettings.hyperRelayColor,
+						approximateBorderFadeOpacity($mapSettings.borderFillColor, $mapSettings.borderFillFade),
+					],
 				})}
 				{...getStrokeAttributes($mapSettings.hyperRelayStroke)}
 				{filter}

diff --git a/src/renderer/src/lib/map/Map.svelte b/src/renderer/src/lib/map/Map.svelte
@@ -73,6 +73,19 @@
 						other approaches resulted in a pixellated look when zoomed in (at least when rendered with WebKitGTK)
 					-->
 				</filter>
+				<filter
+					id="fade"
+					filterUnits="objectBoundingBox"
+					x="-50%"
+					y="-50%"
+					width="200%"
+					height="200%"
+				>
+					<feGaussianBlur
+						in="SourceGraphic"
+						stdDeviation={(1 - $mapSettings.borderFillFade) * 25}
+					/>
+				</filter>
 			{/each}
 		{/if}
 		<Icons />

diff --git a/src/renderer/src/lib/map/SystemIcons.svelte b/src/renderer/src/lib/map/SystemIcons.svelte
@@ -7,7 +7,7 @@
 		type MapSettings,
 	} from '../mapSettings';
 	import type { MapData } from './data/processMapData';
-	import { getFillColorAttributes } from './mapUtils';
+	import { approximateBorderFadeOpacity, getFillColorAttributes } from './mapUtils';
 
 	export let data: MapData;
 	export let colors: Record<string, string>;
@@ -113,7 +113,10 @@
 				mapSettings: $mapSettings,
 				colors,
 				countryColors: systemIcons.system,
-				colorStack: [systemIcon.color, $mapSettings.borderFillColor],
+				colorStack: [
+					systemIcon.color,
+					approximateBorderFadeOpacity($mapSettings.borderFillColor, $mapSettings.borderFillFade),
+				],
 			})}
 		/>
 	{/each}

diff --git a/src/renderer/src/lib/map/mapUtils.ts b/src/renderer/src/lib/map/mapUtils.ts
@@ -7,15 +7,6 @@ import type {
 	MapSettings,
 	StrokeSetting,
 } from '../mapSettings';
-import type { MapData } from './data/processMapData';
-
-function getDisplayedBorders(data: MapData, settings: MapSettings) {
-	return data.borders.filter((border) => border.isKnown || !settings.terraIncognita);
-}
-interface ColorConfig {
-	value: ColorSetting;
-	background?: ColorConfig;
-}
 
 export function resolveColor({
 	mapSettings,
@@ -158,3 +149,31 @@ export function getFillColorAttributes(resolveColorOptions: Parameters<typeof re
 		'fill-opacity': opacity,
 	};
 }
+
+// used for approximating country fill color when the fading effect is active
+// this is needed for reasonable MIN_CONTRAST behavior
+export function approximateBorderFadeOpacity(
+	colorSetting: ColorSetting,
+	fade: number,
+): ColorSetting {
+	const approximateOpacity = fade === 0 ? 1 : 0.4 - 0.6 * fade;
+	const hasOpacity = colorSetting.colorAdjustments.some(
+		(adjustment) => adjustment.type === 'OPACITY',
+	);
+	if (hasOpacity) {
+		return {
+			...colorSetting,
+			colorAdjustments: colorSetting.colorAdjustments.map((a) =>
+				a.type === 'OPACITY' ? { ...a, value: a.value * approximateOpacity } : a,
+			),
+		};
+	} else {
+		return {
+			...colorSetting,
+			colorAdjustments: [
+				...colorSetting.colorAdjustments,
+				{ type: 'OPACITY', value: approximateOpacity },
+			],
+		};
+	}
+}
diff --git a/src/renderer/src/lib/mapSettings.ts b/src/renderer/src/lib/mapSettings.ts
@@ -6,7 +6,7 @@ import { ADDITIONAL_COLORS } from './colors';
 import { stellarisDataPromiseStore } from './loadStellarisData';
 import stellarMapsApi from './stellarMapsApi';
 
-type NumberMapSettings = 'unionLeaderSymbolSize' | 'terraIncognitaBrightness';
+type NumberMapSettings = 'unionLeaderSymbolSize' | 'terraIncognitaBrightness' | 'borderFillFade';
 
 type NumberOptionalMapSettings =
 	| 'countryEmblemsMaxSize'
@@ -294,6 +294,15 @@ export const mapSettingConfig: MapSettingGroup[] = [
 				type: 'color',
 				hideIf: (settings) => !settings.borderStroke.enabled,
 			},
+			{
+				id: 'borderFillFade',
+				name: 'Country Fill Fade',
+				type: 'range',
+				hideIf: (settings) => !settings.borderStroke.enabled,
+				min: 0,
+				max: 1,
+				step: 0.05,
+			},
 			{
 				id: 'sectorBorderStroke',
 				name: 'Sector Borders',
@@ -682,6 +691,7 @@ const defaultMapSettings: MapSettings = {
 		color: 'secondary',
 		colorAdjustments: [{ type: 'OPACITY', value: 0.5 }],
 	},
+	borderFillFade: 0,
 	borderColor: { color: 'primary', colorAdjustments: [] },
 	borderStroke: {
 		enabled: true,
@@ -932,18 +942,19 @@ export const presetMapSettings: SavedMapSettings[] = [
 				color: 'secondary',
 				colorAdjustments: [
 					{
-						type: 'MAX_LIGHTNESS',
-						value: 0.15,
+						type: 'MIN_LIGHTNESS',
+						value: 0.5,
 					},
-					{ type: 'OPACITY', value: 0.5 },
 				],
 			},
+			borderFillFade: 0.5,
 			backgroundColor: {
 				color: 'true_black',
 				colorAdjustments: [],
 			},
 			borderStroke: {
 				...defaultMapSettings.borderStroke,
+				width: 1,
 				glow: true,
 			},
 			sectorBorderStroke: {