From a6ce3ff08ff239992787f187474b8bb587ce01d0 Mon Sep 17 00:00:00 2001 From: TSKsmiley Date: Tue, 7 May 2024 11:16:07 +0200 Subject: [PATCH 1/5] Add new words to cSpell dictionary, update button transitions, fix typo, and improve animation performanceCo-authored-by: Nyby --- .vscode/settings.json | 2 +- src/lib/classes/Loader/NetworkLoader.ts | 18 +- src/lib/classes/Loader/NetworkSchemas.ts | 5 +- src/lib/components/ControlPanel.svelte | 6 +- src/lib/components/CreditsButton.svelte | 2 +- src/lib/components/HelpButton.svelte | 10 +- src/lib/components/Network.svelte | 4 +- src/lib/components/Packet.svelte | 12 +- .../RouterTables/SmallButton.svelte | 2 +- src/lib/components/StartupDialog.svelte | 95 ++ src/lib/components/ToolboxButton.svelte | 9 +- src/lib/components/ViewBox.svelte | 7 +- src/lib/data/LargeNetwork.json | 859 ++++++++++++++++++ ...{DefaultNetwork.json => SmallNetwork.json} | 0 14 files changed, 1008 insertions(+), 23 deletions(-) create mode 100644 src/lib/components/StartupDialog.svelte create mode 100644 src/lib/data/LargeNetwork.json rename src/lib/data/{DefaultNetwork.json => SmallNetwork.json} (100%) diff --git a/.vscode/settings.json b/.vscode/settings.json index bc58b63..25891af 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,4 @@ { - "cSpell.words": ["LFIB", "MPLS", "visibilitychanged"], + "cSpell.words": ["LFIB", "MPLS", "visibilitychanged", "offroad"], "eslint.validate": ["svelte"] } diff --git a/src/lib/classes/Loader/NetworkLoader.ts b/src/lib/classes/Loader/NetworkLoader.ts index efb8e82..4cd9b74 100644 --- a/src/lib/classes/Loader/NetworkLoader.ts +++ b/src/lib/classes/Loader/NetworkLoader.ts @@ -1,17 +1,21 @@ -import { validateDefaultNetwork } from "$lib/classes/Loader/NetworkSchemas"; +import { NetworkSchema } from "$lib/classes/Loader/NetworkSchemas"; import network from "$lib/stores/network"; import LER from "$lib/classes/MPLS/LER"; import LSR from "$lib/classes/MPLS/LSR"; import CE from "$lib/classes/MPLS/CE"; -export default function loadDefaultNetwork() { - if (!validateDefaultNetwork.success) { - throw validateDefaultNetwork.error; +export default function loadNetwork(unparsedNetwork: unknown): boolean { + const Network = NetworkSchema.safeParse(unparsedNetwork); + + if (!Network.success) { + // eslint-disable-next-line no-console + console.warn("Failed to load network data", Network.error); + return false; } let maxId = 0; - for (const routerData of validateDefaultNetwork.data.routers) { + for (const routerData of Network.data.routers) { maxId = Math.max(maxId, routerData.id); switch (routerData.type) { case "LER": { @@ -53,7 +57,7 @@ export default function loadDefaultNetwork() { network.setRouterCount(maxId + 1); - for (const linkData of validateDefaultNetwork.data.links) { + for (const linkData of Network.data.links) { const sourceRouter = network.getRouter(linkData.source); const targetRouter = network.getRouter(linkData.target); @@ -65,4 +69,6 @@ export default function loadDefaultNetwork() { }); } } + + return true; } diff --git a/src/lib/classes/Loader/NetworkSchemas.ts b/src/lib/classes/Loader/NetworkSchemas.ts index d577f8d..bf9ff78 100644 --- a/src/lib/classes/Loader/NetworkSchemas.ts +++ b/src/lib/classes/Loader/NetworkSchemas.ts @@ -1,5 +1,4 @@ import { z } from "zod"; -import defaultNetworkJson from "$lib/data/DefaultNetwork.json"; const NodeSchema = z.object({ label: z.string(), @@ -56,9 +55,7 @@ const LinkSchema = z.object({ bandwidth: z.number(), }); -const DefaultNetworkSchema = z.object({ +export const NetworkSchema = z.object({ routers: z.array(RouterSchema), links: z.array(LinkSchema), }); - -export const validateDefaultNetwork = DefaultNetworkSchema.safeParse(defaultNetworkJson); diff --git a/src/lib/components/ControlPanel.svelte b/src/lib/components/ControlPanel.svelte index 1a72699..5bf4bb8 100644 --- a/src/lib/components/ControlPanel.svelte +++ b/src/lib/components/ControlPanel.svelte @@ -10,7 +10,7 @@ $: buttons = [ { - text: $config.running ? "Pause" : "Resume", + text: $config.running ? "⏸ Resume" : "⏵ Play", callback: () => { $config.running = !$config.running; }, @@ -34,7 +34,7 @@ ]; let resizeBar: HTMLElement; - let transition = "width 250ms"; + let transition = "width 200ms"; $: panelWidth = $locked ? 350 : 0; @@ -67,7 +67,7 @@ resizeBar.releasePointerCapture(event.pointerId); - transition = "width 250ms"; + transition = "width 200ms"; } diff --git a/src/lib/components/CreditsButton.svelte b/src/lib/components/CreditsButton.svelte index 5824bf3..38d59a1 100644 --- a/src/lib/components/CreditsButton.svelte +++ b/src/lib/components/CreditsButton.svelte @@ -31,7 +31,7 @@

A copy of the license is included in the section entitled GNU Free Documentation License.


- The Icon used for CE routers is almost identical to the on on Wikimedia (aspect ratio changed) + The Icon used for CE routers is almost identical to the one on Wikimedia (aspect ratio changed)


diff --git a/src/lib/components/HelpButton.svelte b/src/lib/components/HelpButton.svelte index 84171e4..0115735 100644 --- a/src/lib/components/HelpButton.svelte +++ b/src/lib/components/HelpButton.svelte @@ -27,9 +27,13 @@ to insert routers.


-

Hold the shift key and drag routers to make links.

+

Pressing Space will pause/resume the packet animations.


-

Hold the ctrl key and drag CE's to add destinations.

+

Pressing Tab will open the packet control panel.

+
+

Hold Shift and drag routers to make links.

+
+

Hold Ctrl and drag CE's to add destinations.


Double click a router or link to configure it.


@@ -37,5 +41,7 @@

The export button will download your network as a .json file


+

If you are experiencing packets going offroad, please lower the max packets count.

+

Press Esc to close this popup.

diff --git a/src/lib/components/Network.svelte b/src/lib/components/Network.svelte index d196356..2a63985 100644 --- a/src/lib/components/Network.svelte +++ b/src/lib/components/Network.svelte @@ -1,8 +1,8 @@
+
{#each $network.links as link (link.id)} diff --git a/src/lib/components/Packet.svelte b/src/lib/components/Packet.svelte index e833410..6ff4f3f 100644 --- a/src/lib/components/Packet.svelte +++ b/src/lib/components/Packet.svelte @@ -8,7 +8,17 @@ let animation: Animation | undefined; let packetElement: SVGElement | undefined; - $: if (animation) $config.running ? animation.play() : animation.pause(); + $: { + if (animation) { + requestAnimationFrame(() => { + if ($config.running) { + animation.play(); + } else { + animation.pause(); + } + }); + } + } $: if (animation) animation.playbackRate = $config.speedMultiplier; function calculateTransitionDuration() { diff --git a/src/lib/components/RouterTables/SmallButton.svelte b/src/lib/components/RouterTables/SmallButton.svelte index 40ce887..7abf0b8 100644 --- a/src/lib/components/RouterTables/SmallButton.svelte +++ b/src/lib/components/RouterTables/SmallButton.svelte @@ -15,7 +15,7 @@ min-width: 30px; padding: 0 10px; user-select: none; - transition: background-color 250ms ease; + transition: background-color 200ms ease; } button:hover { diff --git a/src/lib/components/StartupDialog.svelte b/src/lib/components/StartupDialog.svelte new file mode 100644 index 0000000..0a22826 --- /dev/null +++ b/src/lib/components/StartupDialog.svelte @@ -0,0 +1,95 @@ + + + +

Welcome

+

This tool is designed to mimic the basics of MPLS

+

Choose a network:

+
+ {#each startupButtons as button} + + {/each} +
+ + + diff --git a/src/lib/components/ToolboxButton.svelte b/src/lib/components/ToolboxButton.svelte index 0605422..e01bff2 100644 --- a/src/lib/components/ToolboxButton.svelte +++ b/src/lib/components/ToolboxButton.svelte @@ -18,14 +18,21 @@ margin: 2.5px; font-size: 16px; user-select: none; - transition: background-color 250ms ease; min-width: 35px; + transition: + background-color 200ms, + transform 200ms; } button:hover { background-color: #888888; } + button:focus { + transform: scale(1.1); + background-color: #6495ed; + } + @media (prefers-color-scheme: dark) { button { border: 2px solid white; diff --git a/src/lib/components/ViewBox.svelte b/src/lib/components/ViewBox.svelte index 5e5b9ba..7901e55 100644 --- a/src/lib/components/ViewBox.svelte +++ b/src/lib/components/ViewBox.svelte @@ -1,6 +1,7 @@