diff --git a/src/context.ts b/src/context.ts index d6bf0fa0..e4b6a1b0 100644 --- a/src/context.ts +++ b/src/context.ts @@ -16,11 +16,11 @@ export class GlobalContext { private saveIntervalId: NodeJS.Timeout | null = null; private ipGenerator: IpAddressGenerator; - initialize(viewport: Viewport) { + initialize(viewport: Viewport, layer: string) { this.viewport = viewport; // Sets the initial datagraph and viewgraph - loadFromLocalStorage(this); + loadFromLocalStorage(this, layer); this.setIpGenerator(); } diff --git a/src/graphics/left_bar.ts b/src/graphics/left_bar.ts index 4e425442..90a19fd0 100644 --- a/src/graphics/left_bar.ts +++ b/src/graphics/left_bar.ts @@ -22,4 +22,8 @@ export class LeftBar { img.classList.add("icon-img"); button.appendChild(img); } + + clear() { + this.leftBar.textContent = ""; + } } diff --git a/src/index.ejs b/src/index.ejs index 3b789e09..7f229e09 100644 --- a/src/index.ejs +++ b/src/index.ejs @@ -1,33 +1,29 @@ - + + + <%= htmlWebpackPlugin.options.title %> + - - - <%= htmlWebpackPlugin.options.title %> - - - - +
- - - -
GEduNet
+ + + +
GEduNet
-
-
- - - -
-
+
+
+ + + +
+
- - + diff --git a/src/index.ts b/src/index.ts index 91e0c570..a5fd549c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -46,29 +46,49 @@ import PauseSvg from "./assets/pause-icon.svg"; const viewport = new Viewport(app.renderer.events); app.stage.addChild(viewport); + // Get the layer’s menu + const layerSelect = document.getElementById( + "layer-select", + ) as HTMLSelectElement; + // Left bar logic const leftBar = LeftBar.getFrom(document); RightBar.getInstance(); - // Add router button - leftBar.addButton( - RouterSvg, - () => AddDevice(ctx, DeviceType.Router), - "Add Router", - ); + 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 void)[]> = { + application: [addHostButton], + transport: [addHostButton], + network: [addRouterButton, addHostButton], + link: [addRouterButton, addHostButton], + }; + + buttonConfig[layer]?.forEach((addButton) => addButton()); + } - // Add Host button - leftBar.addButton( - ComputerSvg, - () => AddDevice(ctx, DeviceType.Host), - "Add Host", - ); + setButtonsByLayer(layerSelect.value); - ctx.initialize(viewport); + // Initialize Context + ctx.initialize(viewport, layerSelect.value); // Ticker logic // app.ticker.add(() => { }); - const lBar = document.getElementById("left-bar"); const rBar = document.getElementById("right-bar"); const tBar = document.getElementById("top-bar"); @@ -126,16 +146,14 @@ import PauseSvg from "./assets/pause-icon.svg"; pauseButton.onclick = triggerPause; // (!) For layer abstraction functionality - const layerSelect = document.getElementById( - "layer-select", - ) as HTMLSelectElement; - const selectNewLayer = (event: Event) => { const selectedLayer = (event.target as HTMLSelectElement).value; console.log(`Layer selected: ${selectedLayer}`); if (selectedLayer) { ctx.changeViewGraph(selectedLayer); + // LeftBar is reset + setButtonsByLayer(selectedLayer); } }; @@ -149,7 +167,7 @@ import PauseSvg from "./assets/pause-icon.svg"; }; // TODO: load from local storage directly, without first generating a context - loadFromLocalStorage(ctx); + loadFromLocalStorage(ctx, layerSelect.value); console.log("initialized!"); })(); diff --git a/src/types/devices/utils.ts b/src/types/devices/utils.ts index 2b7224d6..cd0e25dd 100644 --- a/src/types/devices/utils.ts +++ b/src/types/devices/utils.ts @@ -53,7 +53,6 @@ export function layerFromName(name: string): Layer { export function layerIncluded(layer1: Layer, layer2: Layer) { // Determines whether layer1 is included within layer2’s abstraction. - console.log(`${layer1.valueOf()} <= ${layer2.valueOf()}`); return layer1.valueOf() <= layer2.valueOf(); } diff --git a/src/types/graphs/viewgraph.ts b/src/types/graphs/viewgraph.ts index e58252fc..1e8a1771 100644 --- a/src/types/graphs/viewgraph.ts +++ b/src/types/graphs/viewgraph.ts @@ -57,7 +57,6 @@ export class ViewGraph { } }); - console.log("Finished creating devices in ViewGraph"); connections.forEach((key) => { const connection = parseConnectionKey(key); const device1 = this.getDevice(connection.id1); @@ -312,9 +311,7 @@ export class ViewGraph { connections: Set, ) { graph.get(v).connections.forEach((w) => { - console.log(`Se accede a ${w} desde ${v}`); if (!visited.has(w)) { - console.log(`Se visita ${w}`); const adyacent = this.datagraph.getDevice(w); // mark node as visited visited.add(w); @@ -322,7 +319,6 @@ export class ViewGraph { // add connection between v and w const connectionKey: string = generateConnectionKey(w, s); if (!connections.has(connectionKey)) { - console.log(`Dispositivos agregados a conexion`); connections.add(connectionKey); } } else { diff --git a/src/types/viewportManager.ts b/src/types/viewportManager.ts index 60b21673..740bd03b 100644 --- a/src/types/viewportManager.ts +++ b/src/types/viewportManager.ts @@ -5,7 +5,7 @@ import { Edge } from "./edge"; import { RightBar } from "../graphics/right_bar"; import { Packet } from "./packet"; import { DeviceType } from "./devices/device"; -import { createDevice } from "./devices/utils"; +import { createDevice, layerFromName } from "./devices/utils"; type Selectable = Device | Edge | Packet; @@ -141,15 +141,15 @@ export function saveToLocalStorage(ctx: GlobalContext) { console.log("Graph saved in local storage."); } -export function loadFromLocalStorage(ctx: GlobalContext) { +export function loadFromLocalStorage(ctx: GlobalContext, currLayer: string) { const jsonData = localStorage.getItem(LOCAL_STORAGE_KEY) || "[]"; try { const graphData: GraphData = JSON.parse(jsonData); - ctx.load(DataGraph.fromData(graphData)); + ctx.load(DataGraph.fromData(graphData), layerFromName(currLayer)); } catch (error) { const extraData = { jsonData, error }; console.error("Failed to load graph from local storage.", extraData); - ctx.load(new DataGraph()); + ctx.load(new DataGraph(), layerFromName(currLayer)); return; } console.log("Graph loaded from local storage.");