refactor: move initialization to left bar (#97)

This PR moves some initialization code from `src/index.ts` to `LeftBar`.

Author: MegaRedHand

src/context.ts

@@ -8,7 +8,7 @@ import {
 } from "./types/viewportManager";
 import { Layer } from "./types/devices/device";
 import { IpAddress, IpAddressGenerator } from "./packets/ip";
-import { layerFromName } from "./types/devices/utils";
+import { layerFromName } from "./types/devices/layer";
 
 export class GlobalContext {
   private viewport: Viewport = null;

src/graphics/left_bar.ts

@@ -1,15 +1,24 @@
+import RouterSvg from "../assets/router.svg";
+import ComputerSvg from "../assets/pc.svg";
+import { addDevice } from "../types/viewportManager";
+import { GlobalContext } from "../context";
+import { DeviceType } from "../types/devices/device";
+import { Layer, layerFromName } from "../types/devices/layer";
+
 export class LeftBar {
   private leftBar: HTMLElement;
+  private ctx: GlobalContext;
 
-  constructor(leftBar: HTMLElement) {
+  constructor(leftBar: HTMLElement, ctx: GlobalContext) {
     this.leftBar = leftBar;
+    this.ctx = ctx;
   }
 
-  static getFrom(document: Document) {
-    return new LeftBar(document.getElementById("left-bar"));
+  static getFrom(document: Document, ctx: GlobalContext) {
+    return new LeftBar(document.getElementById("left-bar"), ctx);
   }
 
-  addButton(src: string, onClick: () => void, label: string) {
+  private addButton(src: string, onClick: () => void, label: string) {
     const button = document.createElement("button");
     button.classList.add("icon-button");
     button.setAttribute("title", label); // Shows Text
@@ -23,7 +32,29 @@ export class LeftBar {
     button.appendChild(img);
   }
 
-  clear() {
+  private clear() {
     this.leftBar.textContent = "";
   }
+
+  private addRouterButton() {
+    const addRouter = () => addDevice(this.ctx, DeviceType.Router);
+    this.addButton(RouterSvg, addRouter, "Add Router");
+  }
+
+  private addHostButton() {
+    const addHost = () => addDevice(this.ctx, DeviceType.Host);
+    this.addButton(ComputerSvg, addHost, "Add Host");
+  }
+
+  setButtonsByLayer(layerName: string) {
+    this.clear();
+
+    const layer = layerFromName(layerName);
+
+    this.addHostButton();
+
+    if (layer <= Layer.Network) {
+      this.addRouterButton();
+    }
+  }
 }

src/index.ts

@@ -1,14 +1,8 @@
 import { Application, Assets } from "pixi.js";
 
-import {
-  AddDevice,
-  loadFromFile,
-  saveToFile,
-  urManager,
-} from "./types/viewportManager";
+import { loadFromFile, saveToFile, urManager } from "./types/viewportManager";
 import { DataGraph } from "./types/graphs/datagraph";
 import { Packet } from "./types/packet";
-import { DeviceType } from "./types/devices/device";
 import { LeftBar } from "./graphics/left_bar";
 import { RightBar } from "./graphics/right_bar";
 import { Viewport } from "./graphics/viewport";
@@ -23,24 +17,29 @@ import PlaySvg from "./assets/play-icon.svg";
 import PauseSvg from "./assets/pause-icon.svg";
 import UndoSvg from "./assets/left-curve-arrow.svg";
 import RedoSvg from "./assets/right-curve-arrow.svg";
-import { layerToName } from "./types/devices/utils";
+import { layerToName } from "./types/devices/layer";
+
+const assets = [RouterSvg, ComputerSvg, PlaySvg, PauseSvg, UndoSvg, RedoSvg];
+
+async function loadAssets(otherPromises: Promise<void>[]) {
+  await Promise.all([...otherPromises, ...assets.map((as) => Assets.load(as))]);
+}
 
 // IIFE to avoid errors
 (async () => {
   // Initialization
   const app = new Application();
-  await app.init({
+  const appInitPromise = app.init({
     width: window.innerWidth,
     height: window.innerHeight,
     resolution: window.devicePixelRatio || 1,
     autoDensity: true,
     antialias: true,
   });
+  await loadAssets([appInitPromise]);
 
   const canvasPlaceholder = document.getElementById("canvas");
   canvasPlaceholder.replaceWith(app.canvas);
-  await Assets.load(RouterSvg);
-  await Assets.load(ComputerSvg);
 
   // Background container initialization
   const viewport = new Viewport(app.renderer.events);
@@ -56,38 +55,12 @@ import { layerToName } from "./types/devices/utils";
 
   layerSelect.value = layerToName(ctx.getCurrentLayer());
 
-  // Left bar logic
-  const leftBar = LeftBar.getFrom(document);
+  // Initialize RightBar
   RightBar.getInstance();
 
-  const addRouterButton = () =>
-    leftBar.addButton(
-      RouterSvg,
-      () => AddDevice(ctx, DeviceType.Router),
-      "Add Router",
-    );
-
-  const addHostButton = () =>
-    leftBar.addButton(
-      ComputerSvg,
-      () => AddDevice(ctx, DeviceType.Host),
-      "Add Host",
-    );
-
-  function setButtonsByLayer(layer: string) {
-    leftBar.clear();
-
-    const buttonConfig: Record<string, (() => void)[]> = {
-      application: [addHostButton],
-      transport: [addHostButton],
-      network: [addRouterButton, addHostButton],
-      link: [addRouterButton, addHostButton],
-    };
-
-    buttonConfig[layer]?.forEach((addButton) => addButton());
-  }
-
-  setButtonsByLayer(layerSelect.value);
+  // Left bar logic
+  const leftBar = LeftBar.getFrom(document, ctx);
+  leftBar.setButtonsByLayer(layerSelect.value);
 
   // Ticker logic
   // app.ticker.add(() => { });
@@ -168,22 +141,17 @@ import { layerToName } from "./types/devices/utils";
 
   // Add keyboard shortcuts for Undo (Ctrl+Z) and Redo (Ctrl+Y)
   document.addEventListener("keydown", (event) => {
-    if (!event.ctrlKey) {
-      return;
-    }
-    switch (event.key) {
-      case "Z": // Ctrl+Shift+Z for Redo
-        event.preventDefault(); // Prevent default browser action (like undo in text inputs)
-        triggerRedo();
-        break;
-      case "z": // Ctrl+Z for Undo
-        event.preventDefault(); // Prevent default browser action (like undo in text inputs)
-        triggerUndo();
-        break;
-      case "y": // Ctrl+Y for Redo
-        event.preventDefault(); // Prevent default browser action
-        triggerRedo();
-        break;
+    if (event.ctrlKey) {
+      switch (event.key) {
+        case "z": // Ctrl+Z for Undo
+          event.preventDefault(); // Prevent default browser action (like undo in text inputs)
+          triggerUndo();
+          break;
+        case "y": // Ctrl+Y for Redo
+          event.preventDefault(); // Prevent default browser action
+          triggerRedo();
+          break;
+      }
     }
   });
 
@@ -223,7 +191,7 @@ import { layerToName } from "./types/devices/utils";
     if (selectedLayer) {
       ctx.changeViewGraph(selectedLayer);
       // LeftBar is reset
-      setButtonsByLayer(selectedLayer);
+      leftBar.setButtonsByLayer(selectedLayer);
     }
   };
 

src/types/devices/device.ts

@@ -20,21 +20,26 @@ import { DeviceInfo } from "../../graphics/renderables/device_info";
 import { IpAddress } from "../../packets/ip";
 import { DeviceId } from "../graphs/datagraph";
 import { DragDeviceMove, EdgeData, AddEdgeMove } from "../undo-redo";
+import { Layer } from "./layer";
 
-export const DEVICE_SIZE = 20;
+export { Layer } from "./layer";
 
-export enum Layer {
-  App = 0,
-  Transport = 1,
-  Network = 2,
-  Link = 3,
-}
+export const DEVICE_SIZE = 20;
 
 export enum DeviceType {
   Router = 0,
   Host = 1,
 }
 
+export function layerFromType(type: DeviceType) {
+  switch (type) {
+    case DeviceType.Router:
+      return Layer.Network;
+    case DeviceType.Host:
+      return Layer.App;
+  }
+}
+
 export abstract class Device extends Sprite {
   readonly id: DeviceId;
   readonly viewgraph: ViewGraph;

src/types/devices/host.ts

@@ -1,4 +1,4 @@
-import { Device, DeviceType, Layer } from "./device";
+import { Device, DeviceType } from "./device";
 import { ViewGraph } from "../graphs/viewgraph";
 import PcImage from "../../assets/pc.svg";
 import { Position } from "../common";
@@ -7,6 +7,7 @@ import { createDropdown, DeviceInfo, RightBar } from "../../graphics/right_bar";
 import { ProgramInfo } from "../../graphics/renderables/device_info";
 import { sendPacket } from "../packet";
 import { Ticker } from "pixi.js";
+import { Layer } from "./layer";
 
 const DEFAULT_ECHO_DELAY = 250; // ms
 

src/types/devices/layer.ts

@@ -0,0 +1,33 @@
+export enum Layer {
+  Link = 0,
+  Network = 1,
+  Transport = 2,
+  App = 3,
+}
+
+const layerFromNameMap: Record<string, Layer> = {
+  application: Layer.App,
+  transport: Layer.Transport,
+  network: Layer.Network,
+  link: Layer.Link,
+};
+
+const layerToNameMap = new Map([
+  [Layer.App, "application"],
+  [Layer.Transport, "transport"],
+  [Layer.Network, "network"],
+  [Layer.Link, "link"],
+]);
+
+export function layerFromName(name: string): Layer {
+  return layerFromNameMap[name];
+}
+
+export function layerToName(layer: Layer): string {
+  return layerToNameMap.get(layer);
+}
+
+export function layerIncluded(layer1: Layer, layer2: Layer) {
+  // Determines whether layer1 is included within layer2’s abstraction.
+  return layer1 >= layer2;
+}

src/types/devices/utils.ts

@@ -1,6 +1,6 @@
 import { IpAddress } from "../../packets/ip";
 import { ViewGraph } from "../graphs/viewgraph";
-import { Device, DeviceType, Layer } from "./device";
+import { Device, DeviceType } from "./device";
 import { Host } from "./host";
 import { Router } from "./router";
 
@@ -28,39 +28,3 @@ export function createDevice(
       return new Host(deviceInfo.id, viewgraph, position, ip, mask);
   }
 }
-
-const layerFromNameMap: Record<string, Layer> = {
-  application: Layer.App,
-  transport: Layer.Transport,
-  network: Layer.Network,
-  link: Layer.Link,
-};
-
-const layerToNameMap = new Map([
-  [Layer.App, "application"],
-  [Layer.Transport, "transport"],
-  [Layer.Network, "network"],
-  [Layer.Link, "link"],
-]);
-
-export function layerFromName(name: string): Layer {
-  return layerFromNameMap[name];
-}
-
-export function layerToName(layer: Layer): string {
-  return layerToNameMap.get(layer);
-}
-
-export function layerIncluded(layer1: Layer, layer2: Layer) {
-  // Determines whether layer1 is included within layer2’s abstraction.
-  return layer1.valueOf() <= layer2.valueOf();
-}
-
-export function layerFromType(type: DeviceType) {
-  switch (type) {
-    case DeviceType.Router:
-      return Layer.Network;
-    case DeviceType.Host:
-      return Layer.App;
-  }
-}

src/types/graphs/viewgraph.ts

@@ -2,13 +2,9 @@ import { Device } from "./../devices/index"; // Import the Device class
 import { Edge } from "./../edge";
 import { DataGraph, DeviceId, GraphNode, isRouter } from "./datagraph";
 import { Viewport } from "../../graphics/viewport";
-import { Layer } from "../devices/device";
-import {
-  CreateDevice,
-  createDevice,
-  layerFromType,
-  layerIncluded,
-} from "../devices/utils";
+import { Layer, layerIncluded } from "../devices/layer";
+import { CreateDevice, createDevice } from "../devices/utils";
+import { layerFromType } from "../devices/device";
 
 export type EdgeId = number;
 

src/types/viewportManager.ts

@@ -105,8 +105,8 @@ document.addEventListener("keydown", (event) => {
 });
 
 // Function to add a device at the center of the viewport
-export function AddDevice(ctx: GlobalContext, type: DeviceType) {
-  console.log(`Entered AddDevice with ${type}`);
+export function addDevice(ctx: GlobalContext, type: DeviceType) {
+  console.log(`Entered addDevice with ${type}`);
   deselectElement();
   const viewgraph = ctx.getViewGraph();
   const datagraph = ctx.getDataGraph();