61 lines
1.3 KiB
Svelte
61 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { getElecColour } from '$lib/railStyles';
|
|
import type { ElecType } from '$lib/railStyles';
|
|
|
|
export let feature: {
|
|
from: {
|
|
elec: ElecType;
|
|
eco?: string;
|
|
};
|
|
to: {
|
|
elec: ElecType;
|
|
eco?: string;
|
|
};
|
|
};
|
|
|
|
$: 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" />
|
|
|
|
{#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}
|
|
|
|
<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>
|