OwlBoard/route-maps
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Run npm format

Browse Source
This commit is contained in:
Fred Boniface
2026-02-05 20:01:54 +00:00
parent 221159433c
commit 4220cdfa5e
18 changed files with 751 additions and 723 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/lib/components/mapIcons/BaseTrack.svelte
View File

@@ -1,22 +1,27 @@
<script lang="ts">
import { getElecColour, type ElecType } from '$lib/railStyles';
import { getElecColour, type ElecType } from '$lib/railStyles';
export let activeElec: ElecType = 'none';
export let height: number = 64;
const width = 6;
export let activeElec: ElecType = 'none';
export let height: number = 64;
const width = 6;
$: colour = getElecColour(activeElec);
$: colour = getElecColour(activeElec);
</script>
<line x1="32" y1="0" x2="32" y2={height}
stroke={colour}
stroke-width={width}
stroke-linecap="butt" />
<line
x1="32"
y1="0"
x2="32"
y2={height}
stroke={colour}
stroke-width={width}
stroke-linecap="butt"
/>
<style>
svg{
display: block;
width: 100%;
height: 100%;
}
</style>
svg {
display: block;
width: 100%;
height: 100%;
}
</style>

124
src/lib/components/mapIcons/Bridge.svelte
View File

@@ -1,74 +1,80 @@
<script lang="ts">
import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
export let feature: {
position: 'over' | 'under';
category: 'rail' | 'footbridge' | 'aroad' | 'minorRoad' | 'motorway' | 'waterway';
roadName?: string;
}
export let feature: {
position: 'over' | 'under';
category: 'rail' | 'footbridge' | 'aroad' | 'minorRoad' | 'motorway' | 'waterway';
roadName?: string;
};
export let activeElec: string;
export let activeElec: string;
const bridgeStyles = {
rail: { color: '#ffffff', stroke: '#000000', width: 20, text: '#000000'},
footbridge: { color: '#ffffff', stroke: '#475569', width: 10, text: '#475569' },
aroad: { color: '#00703c', stroke: '#004d29', width: 24, text: '#FFEB3B' },
minorRoad: { color: '#ffffff', stroke: '#64748b', width: 20, text: '#334155' },
motorway: { color: '#005da1', stroke: '#003e6b', width: 32, text: '#ffffff' },
waterway: { color: '#bae6fd', stroke: '#0369a1', width: 24, text: '#075985' },
pipeline: { color: '#334155', stroke: '#1e293b', width: 4, text: '#334155'},
}
const bridgeStyles = {
rail: { color: '#ffffff', stroke: '#000000', width: 20, text: '#000000' },
footbridge: { color: '#ffffff', stroke: '#475569', width: 10, text: '#475569' },
aroad: { color: '#00703c', stroke: '#004d29', width: 24, text: '#FFEB3B' },
minorRoad: { color: '#ffffff', stroke: '#64748b', width: 20, text: '#334155' },
motorway: { color: '#005da1', stroke: '#003e6b', width: 32, text: '#ffffff' },
waterway: { color: '#bae6fd', stroke: '#0369a1', width: 24, text: '#075985' },
pipeline: { color: '#334155', stroke: '#1e293b', width: 4, text: '#334155' }
};
$: s = bridgeStyles[feature.category] || bridgeStyles.minorRoad;
$: isOver = feature.position === 'over';
$: s = bridgeStyles[feature.category] || bridgeStyles.minorRoad;
$: isOver = feature.position === 'over';
$: topY = 32 - (s.width / 2);
$: bottomY = 32 + (s.width /2);
$: topY = 32 - s.width / 2;
$: bottomY = 32 + s.width / 2;
$: topPath = `M 0 ${topY} Q 8 ${topY} 8 ${topY - 4} M 56 ${topY - 4} Q 56 ${topY} 64 ${topY}`;
$: bottomPath = `M 0 ${bottomY} Q 8 ${bottomY} 8 ${bottomY + 4} M 56 ${bottomY + 4} Q 56 ${bottomY} 64 ${bottomY}`;
$: topPath = `M 0 ${topY} Q 8 ${topY} 8 ${topY - 4} M 56 ${topY - 4} Q 56 ${topY} 64 ${topY}`;
$: bottomPath = `M 0 ${bottomY} Q 8 ${bottomY} 8 ${bottomY + 4} M 56 ${bottomY + 4} Q 56 ${bottomY} 64 ${bottomY}`;
$: bodyPath = `M 0 ${topY} L 64 ${topY} L 64 ${bottomY} L 0 ${bottomY} Z`;
$: bodyPath = `M 0 ${topY} L 64 ${topY} L 64 ${bottomY} L 0 ${bottomY} Z`;
</script>
<svg viewBox="0 0 64 64" width="64" height="64" class="bridge">
{#if !isOver}
<path d={bodyPath} fill={s.color} />
<path d={`M 0 ${topY} L 64 ${topY}`} stroke={s.stroke} stroke-width="2" />
<path d={`M 0 ${bottomY} L 64 ${bottomY}`} stroke={s.stroke} stroke-width="2" />
<BaseTrack {activeElec} height={64} />
{:else}
<BaseTrack {activeElec} height={64} />
<path d={bodyPath} fill="white" /> <path d={bodyPath} fill={s.color} />
<g fill="none" stroke={s.stroke} stroke-width="2.5" stroke-linecap="round">
<path d={`M 0 ${topY} L 64 ${topY}`} />
<path d={`M 0 ${bottomY} L 64 ${bottomY}`} />
<path d={`M 0 ${topY} Q 4 ${topY} 4 ${topY-6}`} />
<path d={`M 64 ${topY} Q 60 ${topY} 60 ${topY-6}`} />
<path d={`M 0 ${bottomY} Q 4 ${bottomY} 4 ${bottomY+6}`} />
<path d={`M 64 ${bottomY} Q 60 ${bottomY} 60 ${bottomY+6}`} />
</g>
{#if !isOver}
<path d={bodyPath} fill={s.color} />
<path d={`M 0 ${topY} L 64 ${topY}`} stroke={s.stroke} stroke-width="2" />
<path d={`M 0 ${bottomY} L 64 ${bottomY}`} stroke={s.stroke} stroke-width="2" />
<BaseTrack {activeElec} height={64} />
{:else}
<BaseTrack {activeElec} height={64} />
{#if feature.roadName}
<text
x="32" y="32"
text-anchor="middle"
dominant-baseline="central"
fill={s.text}
font-family="sans-serif"
font-weight="bold"
font-size={s.width > 20 ? "10" : "8"}
style="pointer-events: none; text-transform: uppercase; letter-spacing: 0.5px;"
>
{feature.roadName}
</text>
{/if}
{/if}
<path d={bodyPath} fill="white" /> <path d={bodyPath} fill={s.color} />
<g fill="none" stroke={s.stroke} stroke-width="2.5" stroke-linecap="round">
<path d={`M 0 ${topY} L 64 ${topY}`} />
<path d={`M 0 ${bottomY} L 64 ${bottomY}`} />
<path d={`M 0 ${topY} Q 4 ${topY} 4 ${topY - 6}`} />
<path d={`M 64 ${topY} Q 60 ${topY} 60 ${topY - 6}`} />
<path d={`M 0 ${bottomY} Q 4 ${bottomY} 4 ${bottomY + 6}`} />
<path d={`M 64 ${bottomY} Q 60 ${bottomY} 60 ${bottomY + 6}`} />
</g>
{#if feature.roadName}
<text
x="32"
y="32"
text-anchor="middle"
dominant-baseline="central"
fill={s.text}
font-family="sans-serif"
font-weight="bold"
font-size={s.width > 20 ? '10' : '8'}
style="pointer-events: none; text-transform: uppercase; letter-spacing: 0.5px;"
>
{feature.roadName}
</text>
{/if}
{/if}
</svg>
<style>
svg { display: block; overflow: visible; }
text { user-select: none; }
</style>
svg {
display: block;
overflow: visible;
}
text {
user-select: none;
}
</style>

78
src/lib/components/mapIcons/Crossing.svelte
View File

@@ -1,45 +1,57 @@
<script lang="ts">
import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
export let feature: {
kind: 'uwc' | 'ahb' | 'mcb' | 'cctv' | 'tmo' | 'foot';
};
export let feature: {
kind: 'uwc' | 'ahb' | 'mcb' | 'cctv' | 'tmo' | 'foot';
};
export let activeElec: any;
export let activeElec: any;
$: type = feature.kind.toLowerCase();
$: isFoot = type === 'foot';
$: filterCategory = isFoot ? 'foot' : (type === 'uwc' ? 'uwc' : 'level-crossing');
$: type = feature.kind.toLowerCase();
$: isFoot = type === 'foot';
$: filterCategory = isFoot ? 'foot' : type === 'uwc' ? 'uwc' : 'level-crossing';
</script>
<svg viewBox="0 0 64 64" width="64" height="64" class={filterCategory}>
<BaseTrack {activeElec} height={64} />
<BaseTrack {activeElec} height={64} />
{#if type === 'foot'}
<line x1="12" y1="32" x2="52" y2="32" stroke="#475569" stroke-width="2" stroke-dasharray="4 2" />
{#if type === 'foot'}
<line
x1="12"
y1="32"
x2="52"
y2="32"
stroke="#475569"
stroke-width="2"
stroke-dasharray="4 2"
/>
{:else if type === 'uwc'}
<g stroke="#1e293b" stroke-width="3">
<line x1="12" y1="26" x2="26" y2="26" />
<line x1="38" y1="38" x2="52" y2="38" />
</g>
<text x="50" y="32" class="label-right">UWC</text>
{:else}
<rect x="18" y="22" width="28" height="20" rx="1" fill="#1e293b" />
{:else if type === 'uwc'}
<g stroke="#1e293b" stroke-width="3">
<line x1="12" y1="26" x2="26" y2="26" />
<line x1="38" y1="38" x2="52" y2="38" />
</g>
<text x="50" y="32" class="label-right">UWC</text>
{:else}
<rect x="18" y="22" width="28" height="20" rx="1" fill="#1e293b" />
<circle cx="25" cy="29" r="3.5" fill="#ef4444" /> <circle cx="39" cy="29" r="3.5" fill="#ef4444" /> <circle cx="32" cy="37" r="3.5" fill="#ffcc00" /> <text x="50" y="32" class="label-right">{type.toUpperCase()}</text>
{/if}
<circle cx="25" cy="29" r="3.5" fill="#ef4444" />
<circle cx="39" cy="29" r="3.5" fill="#ef4444" />
<circle cx="32" cy="37" r="3.5" fill="#ffcc00" />
<text x="50" y="32" class="label-right">{type.toUpperCase()}</text>
{/if}
</svg>
<style>
svg { display: block; overflow: visible; }
.label-right {
text-anchor: start; /* Align to the left of the start point */
dominant-baseline: central;
font-family: sans-serif;
font-weight: bold;
font-size: 9px;
fill: #1e293b;
}
</style>
svg {
display: block;
overflow: visible;
}
.label-right {
text-anchor: start; /* Align to the left of the start point */
dominant-baseline: central;
font-family: sans-serif;
font-weight: bold;
font-size: 9px;
fill: #1e293b;
}
</style>

22
src/lib/components/mapIcons/Crossover.svelte
View File

@@ -1,18 +1,18 @@
<script lang="ts">
import { getElecColour } from '$lib/railStyles';
import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
import { getElecColour } from '$lib/railStyles';
import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
export let activeElec: any;
export let features: any;
export let activeElec: any;
export let features: any;
$: branchColour = getElecColour(features?.elecBranch || activeElec);
$: branchColour = getElecColour(features?.elecBranch || activeElec);
</script>
<svg viewBox="0 0 64 64" width="64" height="64" class="crossover">
<g stroke={branchColour} stroke-width="3" stroke-linecap="round">
<line x1="16" y1="44" x2="48" y2="12" />
<line x1="16" y1="52" x2="48" y2="20" />
</g>
<g stroke={branchColour} stroke-width="3" stroke-linecap="round">
<line x1="16" y1="44" x2="48" y2="12" />
<line x1="16" y1="52" x2="48" y2="20" />
</g>
<BaseTrack {activeElec} height={64} />
</svg>
<BaseTrack {activeElec} height={64} />
</svg>

84
src/lib/components/mapIcons/ElectrificationChange.svelte
View File

@@ -1,49 +1,59 @@
<script lang="ts">
import { getElecColour } from '$lib/railStyles';
import { getElecColour } from '$lib/railStyles';
export let feature: {
from: {
elec: string;
eco?: string;
},
to: {
elec: string;
eco?: string;
}
}
export let feature: {
from: {
elec: string;
eco?: string;
};
to: {
elec: string;
eco?: string;
};
};
$: fromColour = getElecColour(feature.from.elec);
$: toColour = getElecColour(feature.to.elec);
$: showFromEco = !!feature.from.eco;
$: showToEco = !!feature.to.eco;
$: fromColour = getElecColour(feature.from.elec);
$: toColour = getElecColour(feature.to.elec);
$: showFromEco = !!feature.from.eco;
$: showToEco = !!feature.to.eco;
</script>
<svg viewBox="0 0 64 64" width="64" height="64" style="overflow: visible;">
<line x1="32" y1="0" x2="32" y2="32" stroke={fromColour} stroke-width="6" />
<line x1="32" y1="32" x2="32" y2="64" stroke={toColour} stroke-width="6" />
<line x1="32" y1="0" x2="32" y2="32" stroke={fromColour} stroke-width="6" />
<line x1="32" y1="32" x2="32" y2="64" stroke={toColour} stroke-width="6" />
{#if showFromEco || showToEco}
<line x1="32" y1="32" x2="800" y2="32"
stroke="#ef4444" stroke-width="2" stroke-dasharray="6 3" />
{#if showFromEco || showToEco}
<line
x1="32"
y1="32"
x2="800"
y2="32"
stroke="#ef4444"
stroke-width="2"
stroke-dasharray="6 3"
/>
<g font-family="sans-serif" font-size="10" font-weight="800" text-anchor="start">
{#if showFromEco}
<text x="75" y="24" fill="#b91c1c" style="text-transform: uppercase;">
ECO: {feature.from.eco}
</text>
{/if}
{#if showToEco}
<text x="75" y="48" fill="#b91c1c" style="text-transform: uppercase;">
ECO: {feature.to.eco}
</text>
{/if}
</g>
{/if}
<g font-family="sans-serif" font-size="10" font-weight="800" text-anchor="start">
{#if showFromEco}
<text x="75" y="24" fill="#b91c1c" style="text-transform: uppercase;">
ECO: {feature.from.eco}
</text>
{/if}
<rect x="24" y="30" width="16" height="4" fill="white" stroke="#b91c1c" stroke-width="1.5" />
{#if showToEco}
<text x="75" y="48" fill="#b91c1c" style="text-transform: uppercase;">
ECO: {feature.to.eco}
</text>
{/if}
</g>
{/if}
<rect x="24" y="30" width="16" height="4" fill="white" stroke="#b91c1c" stroke-width="1.5" />
</svg>
<style>
svg { display: block; overflow: visible; }
</style>
svg {
display: block;
overflow: visible;
}
</style>

53
src/lib/components/mapIcons/Junction.svelte
View File

@@ -1,39 +1,36 @@
<script lang="ts">
import {getElecColour} from '$lib/railStyles';
import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
import { getElecColour } from '$lib/railStyles';
import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
export let feature: {
direction: 'up' | 'down';
diverges: 'left' | 'right';
elecBranch?: string;
};
export let activeElec: any;
export let reversed: boolean = false;
export let feature: {
direction: 'up' | 'down';
diverges: 'left' | 'right';
elecBranch?: string;
};
export let activeElec: any;
export let reversed: boolean = false;
$: isUp = feature.direction === 'up';
$: visualUp = reversed ? !isUp : isUp;
$: isRight = feature.diverges === 'right';
$: isUp = feature.direction === 'up';
$: visualUp = reversed ? !isUp : isUp;
$: yStart = visualUp ? 64 : 0;
$: yEnd = visualUp ? 8 : 56;
$: xEnd = isRight ? 56 : 8;
$: isRight = feature.diverges === 'right';
$: branchColour = getElecColour(feature.elecBranch || activeElec);
$: branchPath = `M 32 ${yStart} Q 32 32 ${xEnd} ${yEnd}`;
$: yStart = visualUp ? 64 : 0;
$: yEnd = visualUp ? 8 : 56;
$: xEnd = isRight ? 56 : 8;
$: branchColour = getElecColour(feature.elecBranch || activeElec);
$: branchPath = `M 32 ${yStart} Q 32 32 ${xEnd} ${yEnd}`;
</script>
<svg viewBox="0 0 64 64" width="64" height="64" class="junction">
<path
d={branchPath}
fill="none"
stroke={branchColour}
stroke-width="5"
strone-linecap="round"
/>
<BaseTrack {activeElec} height={64} />
<path d={branchPath} fill="none" stroke={branchColour} stroke-width="5" strone-linecap="round" />
<BaseTrack {activeElec} height={64} />
</svg>
<style>
svg { display: block; overflow: visible; }
</style>
svg {
display: block;
overflow: visible;
}
</style>

51
src/lib/components/mapIcons/Loop.svelte
View File

@@ -1,37 +1,36 @@
<script lang="ts">
import { getElecColour } from '$lib/railStyles';
import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
import { getElecColour } from '$lib/railStyles';
import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
export let feature: {
position: 'left' | 'right' | 'both';
elecLoop?: string;
};
export let feature: {
position: 'left' | 'right' | 'both';
elecLoop?: string;
};
export let reversed: boolean = false;
export let activeElec: any;
export let reversed: boolean = false;
export let activeElec: any;
$: loopColour = getElecColour(feature.elecLoop || activeElec);
$: loopColour = getElecColour(feature.elecLoop || activeElec);
$: effectivePosition = (() => {
if (!reversed || feature.position === 'both') return feature.position;
return feature.position === 'left' ? 'right' : 'left';
})();
$: effectivePosition = (() => {
if (!reversed || feature.position === 'both') return feature.position;
return feature.position === 'left' ? 'right' : 'left';
})();
const leftPath = `M 32 0 Q 8 32 32 64`;
const rightPath = `M 32 0 Q 56 32 32 64`;
const leftPath = `M 32 0 Q 8 32 32 64`;
const rightPath = `M 32 0 Q 56 32 32 64`;
</script>
<svg viewBox="0 0 64 64" width="64" height="64" class="loops">
<g fill="none" stroke={loopColour} stroke-width="4" stroke-linecap="round">
{#if effectivePosition === 'left' || feature.position === 'both'}
<path d={leftPath} />
{/if}
{#if effectivePosition === 'right' || feature.position === 'both'}
<path d={rightPath} />
{/if}
</g>
<g fill="none" stroke={loopColour} stroke-width="4" stroke-linecap="round">
{#if effectivePosition === 'left' || feature.position === 'both'}
<path d={leftPath} />
{/if}
<BaseTrack {activeElec} height={64} />
{#if effectivePosition === 'right' || feature.position === 'both'}
<path d={rightPath} />
{/if}
</g>
</svg>
<BaseTrack {activeElec} height={64} />
</svg>

43
src/lib/components/mapIcons/SignallerChange.svelte
View File

@@ -1,26 +1,33 @@
<script lang="ts">
import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
export let feature: {
from: string;
to: string;
};
export let feature: {
from: string;
to: string;
};
export let activeElec: any;
export let activeElec: any;
</script>
<svg viewBox="0 0 64 64" width="64" height="64" style="overflow: visible;">
<BaseTrack {activeElec} height={64} />
<BaseTrack {activeElec} height={64} />
<line x1="-500" y1="32" x2="800" y2="32"
stroke="#6366f1" stroke-width="2" stroke-dasharray="8 4" />
<line
x1="-500"
y1="32"
x2="800"
y2="32"
stroke="#6366f1"
stroke-width="2"
stroke-dasharray="8 4"
/>
<g font-family="sans-serif" font-weight="800" font-size="11">
<text x="70" y="24" fill="#4338ca" style="text-transform: uppercase;">
{feature.from}
</text>
<text x="70" y="46" fill="#4338ca" style="text-transform: uppercase;">
{feature.to}
</text>
</g>
</svg>
<g font-family="sans-serif" font-weight="800" font-size="11">
<text x="70" y="24" fill="#4338ca" style="text-transform: uppercase;">
{feature.from}
</text>
<text x="70" y="46" fill="#4338ca" style="text-transform: uppercase;">
{feature.to}
</text>
</g>
</svg>

12
src/lib/components/mapIcons/SiteOf.svelte
View File

@@ -1,11 +1,11 @@
<script lang="ts">
import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
export let activeElec: string;
export let feature: any;
export let reversed: boolean;
export let activeElec: string;
export let feature: any;
export let reversed: boolean;
</script>
<svg viewBox="0 0 64 64" width="64" height="64" class="loops">
<BaseTrack {activeElec} height={64} />
</svg>
<BaseTrack {activeElec} height={64} />
</svg>

31
src/lib/components/mapIcons/Station.svelte
View File

@@ -1,26 +1,19 @@
<script lang="ts">
import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
import { type ElecType } from '$lib/railStyles';
import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
import { type ElecType } from '$lib/railStyles';
export let feature;
export let activeElec: ElecType;
export let feature;
export let activeElec: ElecType;
$: isTerminus = feature.terminus;
$: isTerminus = feature.terminus;
</script>
<svg viewBox="0 0 64 64" class="station">
{#if !isTerminus}
<BaseTrack {activeElec} height={64} />
<circle cx="32" cy="32" r="12" fill="white" />
<circle cx="32" cy="32" r="12" fill="none" stroke="#000000" stroke-width="3" />
{:else}
<rect
x="8" y="12"
width="50" height="50"
rx="8"
fill="white"
stroke="black"
stroke-width="3"
/>
{/if}
{#if !isTerminus}
<BaseTrack {activeElec} height={64} />
<circle cx="32" cy="32" r="12" fill="white" />
<circle cx="32" cy="32" r="12" fill="none" stroke="#000000" stroke-width="3" />
{:else}
<rect x="8" y="12" width="50" height="50" rx="8" fill="white" stroke="black" stroke-width="3" />
{/if}
</svg>