minor changes v4

src/lib/classes/MPLS/CE.ts

@@ -15,6 +15,8 @@ export default class CE extends Router {
   };
 
   updateAddress = (oldAddress: string, newAddress: string) => {
+    if (oldAddress === newAddress) return;
+
     const oldValue = this.firstHop.get(oldAddress);
     if (oldValue === undefined) {
       alert(`Unable to update old first hop Address '${oldAddress}' to '${newAddress}'.`);

src/lib/classes/MPLS/Packet.ts

@@ -59,6 +59,13 @@ export default class Packet {
     );
   }
 
+  validateFirstHop() {
+    return (
+      network.doesLinkExist({ source: this.source, target: this.nextHop }) ||
+      network.doesLinkExist({ source: this.nextHop, target: this.source })
+    );
+  }
+
   setFallbackNextHop() {
     const nextHop = this.fallbackRoute?.shift();
 

src/lib/classes/NetworkStore.ts

@@ -163,14 +163,6 @@ export class NetworkStore implements Writable<NetworkState> {
     return this.CEMap.get(address);
   }
 
-  getSureCERouter(address: string): CE {
-    const router = this.getCERouter(address);
-
-    if (!router) throw new Error(`Router with address ${address} not found`);
-
-    return router;
-  }
-
   addPacket(source: CE, destination: CE) {
     if (this._packets.length >= this.maxPackets) return;
 

src/lib/components/ControlPanel.svelte

@@ -26,7 +26,8 @@
       callback: () => {
         for (const source of CERouters) {
           for (const [destination] of source.firstHop) {
-            network.addPacket(source, network.getSureCERouter(destination));
+            const destinationRouter = network.getCERouter(destination);
+            if (destinationRouter) network.addPacket(source, destinationRouter);
           }
         }
       },
@@ -76,6 +77,7 @@
 </div>
 <div id="control-panel" style={`width: ${panelWidth}px; transition: ${transition};`}>
   <div id="control-panel-content">
+    <h1 id="simulation-panel-title">Simulation Panel</h1>
     <p id="packet-controls-title">Packet Controls</p>
     <p id="packet-controls-count">Count: {$network.packets.length}</p>
     <div id="control-panel-buttons">
@@ -116,6 +118,11 @@
     background-color: black;
   }
 
+  #simulation-panel-title {
+    text-align: center;
+    padding-top: 20px;
+  }
+
   #control-panel {
     display: flex;
     flex-direction: column;

src/lib/components/HelpButton.svelte

@@ -33,7 +33,7 @@
   <br />
   <p>Pressing Space will pause/resume the packet animations.</p>
   <br />
-  <p>Pressing Tab will open the packet control panel.</p>
+  <p>Pressing Tab will open the simulation panel.</p>
   <br />
   <p>Hold Shift, then click and drag between routers to create links</p>
   <br />

src/lib/components/LSPElement.svelte

@@ -4,26 +4,28 @@
   import ToolboxButton from "$lib/components/ToolboxButton.svelte";
 
   export let source: CE;
-  export let destination: CE;
+  export let destination: CE | undefined;
 
   function createPacket() {
-    network.addPacket(source, destination);
+    if (destination) network.addPacket(source, destination);
   }
 
   function deleteDestination() {
-    if (!confirm("Are you sure you want to delete this LSP?")) return;
+    if (!confirm("Are you sure you want to delete this LSP?") || !destination) return;
     source.deleteEntry(destination.address);
     network.notify();
   }
 </script>
 
-<div>
-  <p>{source.address}</p>
-  <p>→</p>
-  <p>{destination.address}</p>
-  <ToolboxButton text={"Play"} callback={createPacket} />
-  <ToolboxButton text={"Delete"} callback={deleteDestination} />
-</div>
+{#if destination}
+  <div>
+    <p>{source.address}</p>
+    <p>→</p>
+    <p>{destination.address}</p>
+    <ToolboxButton text={"Play"} callback={createPacket} />
+    <ToolboxButton text={"Delete"} callback={deleteDestination} />
+  </div>
+{/if}
 
 <style>
   div {

src/lib/components/LSPList.svelte

@@ -9,7 +9,7 @@
 <div>
   {#each CERouters as source}
     {#each [...source.firstHop] as [destination]}
-      <LSPElement {source} destination={network.getSureCERouter(destination)} />
+      <LSPElement {source} destination={network.getCERouter(destination)} />
     {/each}
   {/each}
 </div>

src/lib/components/Packet.svelte

@@ -69,7 +69,11 @@
     animateToNextHop();
   }
 
-  requestAnimationFrame(animateToNextHop);
+  if (packet.validateFirstHop()) {
+    requestAnimationFrame(animateToNextHop);
+  } else {
+    packet.drop("Invalid first hop");
+  }
 </script>
 
 <circle class:labeled={packet.label !== -1} bind:this={packetElement} r="5" />

src/lib/components/RouterSettings.svelte

@@ -30,12 +30,6 @@
 <Dialog
   bind:dialog
   on:close={() => {
-    // TODO: Temporary fix to not crash app (ISSUE #125) - remove when fixed - it's because LSPList.svelte using getSureCERouter
-    if (router instanceof CE) {
-      for (const key of router.firstHop.keys()) {
-        if (key === "") router.firstHop.delete(key);
-      }
-    }
     network.notify();
   }}
 >

src/lib/components/RouterTables/Destination.svelte

@@ -28,6 +28,7 @@
 
     if (!destinationRouter) {
       alert("Destination router not found.");
+      event.target.value = destination;
       return;
     }
 

src/lib/components/ViewBox.svelte

@@ -100,6 +100,10 @@
   }
 
   function handleKeyDown(event: KeyboardEvent) {
+    for (const dialog of document.querySelectorAll("dialog")) {
+      if (dialog.hasAttribute("open")) return;
+    }
+
     switch (event.code) {
       case "Escape":
         $editorState.placing = null;
@@ -127,9 +131,7 @@
   }
 
   function buttonPreviewRouter(type: "CE" | "LSR" | "LER") {
-    for (const dialog of document.querySelectorAll("dialog")) {
-      if (dialog.hasAttribute("open")) return;
-    }
+    if ($locked) return;
     $editorState.placing = type;
   }
 
@@ -138,7 +140,7 @@
 
     event.preventDefault();
 
-    if (interactionState === InteractionState.ADDING_ROUTERS) {
+    if (interactionState === InteractionState.ADDING_ROUTERS && !$locked) {
       switch ($editorState.placing) {
         case "CE":
           network.createCE(scaledX(event.clientX), scaledY(event.clientY));

src/routes/+layout.svelte

@@ -45,7 +45,8 @@
       background-color: #222222;
     }
 
-    :global(p) {
+    :global(p),
+    :global(h1) {
       color: white;
     }