SteamWar/Website
10
1
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

feat: Refactor connection rendering logic for improved layout and offset handling
All checks were successful
SteamWarCI Build successful
Details

Browse Source
This commit is contained in:
Chaoscaot
2026-01-01 17:18:54 +01:00
parent fa7e68ca10
commit 35765b90e6
1 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/event/ConnectionRenderer.svelte
View File

@@ -55,35 +55,36 @@
<!-- Apply horizontal offset only to the mid bridge and second segment fan-out; also shift vertical line to keep continuity --> <!-- Apply horizontal offset only to the mid bridge and second segment fan-out; also shift vertical line to keep continuity -->
{@const midLeft = fromLeft + horizontalDistance / 2 + connection.offset} {@const midLeft = fromLeft + horizontalDistance / 2 + connection.offset}
{@const firstSegmentWidth = horizontalDistance / 2} {@const firstSegmentWidth = horizontalDistance / 2}
{@const secondSegmentWidth = horizontalDistance / 2}
<div {#if firstSegmentWidth > 0}
class="horizontal-line" <div
style=" class="horizontal-line"
style="
background-color: {connection.color}; background-color: {connection.color};
left: {fromLeft}px; left: {fromLeft}px;
top: {fromTop + connection.offset / 4}px; top: {fromTop + connection.offset / 4}px;
width: {firstSegmentWidth + connection.offset + 2}px; width: {firstSegmentWidth + connection.offset + 2}px;
" "
></div> ></div>
<div <div
class="vertical-line" class="vertical-line"
style=" style="
background-color: {connection.color}; background-color: {connection.color};
left: {midLeft}px; left: {midLeft}px;
top: {Math.min(fromTop + connection.offset / 4, toTop + connection.offset / 4)}px; top: {Math.min(fromTop + connection.offset / 4, toTop + connection.offset / 4)}px;
height: {Math.abs(toTop + connection.offset / 4 - (fromTop + connection.offset / 4))}px; height: {Math.abs(toTop + connection.offset / 4 - (fromTop + connection.offset / 4))}px;
" "
></div> ></div>
<div <div
class="horizontal-line" class="horizontal-line"
style=" style="
background-color: {connection.color}; background-color: {connection.color};
left: {midLeft}px; left: {midLeft}px;
top: {toTop + connection.offset / 4}px; top: {toTop + connection.offset / 4}px;
width: {secondSegmentWidth - connection.offset}px; width: {firstSegmentWidth - connection.offset}px;
" "
></div> ></div>
{/if}
{/each} {/each}
{/key} {/key}
</div> </div>