Skip to content

Commit fa4bbbe

Browse files
Manuel-PolManuel-Pol
authored
Refactor/devices operation into datagraph (#172)
1 parent b3f8356 commit fa4bbbe

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+1260
-455
lines changed

‎src/context.ts‎

Lines changed: 13 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import { Viewport } from "./graphics/viewport";
2-
import { DataGraph, isLinkNode, isNetworkNode } from "./types/graphs/datagraph";
2+
import { DataGraph } from "./types/graphs/datagraph";
33
import { ViewGraph } from "./types/graphs/viewgraph";
44
import {
55
loadFromLocalStorage,
66
saveToLocalStorage,
77
urManager,
88
} from "./types/viewportManager";
9-
import { Layer } from "./types/devices/device";
109
import { compareIps, IpAddress, IpAddressGenerator } from "./packets/ip";
11-
import { layerFromName } from "./types/devices/layer";
12-
import { SpeedMultiplier } from "./types/devices/speedMultiplier";
10+
import { layerFromName, Layer } from "./types/layer";
11+
import { SpeedMultiplier } from "./types/speedMultiplier";
1312
import {
1413
compareMacs,
1514
MacAddress,
1615
MacAddressGenerator,
1716
} from "./packets/ethernet";
17+
import { DataNetworkDevice } from "./types/data-devices";
1818
import { Colors } from "./utils/utils";
1919

2020
export class GlobalContext {
@@ -50,11 +50,12 @@ export class GlobalContext {
5050

5151
private setNetwork(datagraph: DataGraph, layer: Layer) {
5252
this.datagraph = datagraph;
53-
this.viewport.clear();
5453
if (this.viewgraph) {
55-
this.viewgraph.clear();
54+
this.viewgraph.setDataGraph(datagraph);
55+
this.viewgraph.changeCurrLayer(layer);
56+
} else {
57+
this.viewgraph = new ViewGraph(datagraph, this, layer);
5658
}
57-
this.viewgraph = new ViewGraph(this.datagraph, this, layer);
5859
this.setIpGenerator();
5960
this.setMacGenerator();
6061
}
@@ -149,14 +150,9 @@ export class GlobalContext {
149150
let maxIp = IpAddress.parse("10.0.0.0");
150151

151152
for (const [, device] of this.datagraph.getDevices()) {
152-
if (isNetworkNode(device)) {
153-
const ip = IpAddress.parse(device.ip);
154-
if (ip === null) {
155-
console.error("Failed to parse IP address: " + device.ip);
156-
} else {
157-
if (compareIps(maxIp, ip) < 0) {
158-
maxIp = ip;
159-
}
153+
if (device instanceof DataNetworkDevice) {
154+
if (compareIps(maxIp, device.ip) < 0) {
155+
maxIp = device.ip;
160156
}
161157
}
162158
}
@@ -168,11 +164,8 @@ export class GlobalContext {
168164
private setMacGenerator() {
169165
let maxMac = MacAddress.parse("00:00:10:00:00:00");
170166
for (const [, device] of this.datagraph.getDevices()) {
171-
if (isLinkNode(device)) {
172-
const mac = MacAddress.parse(device.mac);
173-
if (compareMacs(maxMac, mac) < 0) {
174-
maxMac = mac;
175-
}
167+
if (compareMacs(maxMac, device.mac) < 0) {
168+
maxMac = device.mac;
176169
}
177170
}
178171
// TODO: we should use MacAddress instead of string here and in Datagraph

‎src/graphics/left_bar.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import ComputerSvg from "../assets/pc.svg";
33
import SwitchSvg from "../assets/switch.svg";
44
import { addDevice } from "../types/viewportManager";
55
import { GlobalContext } from "../context";
6-
import { DeviceType } from "../types/devices/device";
7-
import { Layer, layerFromName } from "../types/devices/layer";
86
import { TooltipManager } from "./renderables/tooltip_manager";
7+
import { DeviceType } from "../types/view-devices/vDevice";
8+
import { Layer, layerFromName } from "../types/layer";
99

1010
export class LeftBar {
1111
private leftBar: HTMLElement;

‎src/graphics/renderables/device_info.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ProgramRunner } from "../../programs";
2-
import { Device } from "../../types/devices";
3-
import { DeviceType } from "../../types/devices/device";
2+
import { ViewDevice } from "../../types/view-devices";
3+
import { DeviceType } from "../../types/view-devices/vDevice";
44
import { ViewGraph } from "../../types/graphs/viewgraph";
55
import { RemoveDeviceMove } from "../../types/undo-redo";
66
import { urManager } from "../../types/viewportManager";
@@ -13,10 +13,10 @@ import { StyledInfo } from "./styled_info";
1313
export { ProgramInfo } from "./program_info";
1414

1515
export class DeviceInfo extends StyledInfo {
16-
readonly device: Device;
16+
readonly device: ViewDevice;
1717
inputFields: Node[] = [];
1818

19-
constructor(device: Device) {
19+
constructor(device: ViewDevice) {
2020
super(getTypeName(device) + " Information");
2121
this.device = device;
2222
this.addCommonInfoFields();
@@ -88,7 +88,7 @@ export class DeviceInfo extends StyledInfo {
8888
}
8989
}
9090

91-
function getTypeName(device: Device): string {
91+
function getTypeName(device: ViewDevice): string {
9292
switch (device.getType()) {
9393
case DeviceType.Router:
9494
return "Router";

‎src/graphics/right_bar.ts‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
1-
import {
2-
DeviceId,
3-
isRouter,
4-
RoutingTableEntry,
5-
} from "../types/graphs/datagraph";
1+
import { DataRouter } from "../types/data-devices";
2+
import { DeviceId, RoutingTableEntry } from "../types/graphs/datagraph";
63
import { ViewGraph } from "../types/graphs/viewgraph";
74
import { TOOLTIP_KEYS } from "../utils/constants/tooltips_constants";
85
import { TooltipManager } from "./renderables/tooltip_manager";
@@ -167,7 +164,7 @@ function updateRoutingTableUI(
167164
viewgraph: ViewGraph,
168165
): void {
169166
const router = viewgraph.getDataGraph().getDevice(deviceId);
170-
if (!router || !isRouter(router)) {
167+
if (!router || !(router instanceof DataRouter)) {
171168
console.warn(`Device with ID ${deviceId} is not a valid router.`);
172169
return;
173170
}

‎src/handlers/layerSelectorHandler.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { GlobalContext } from "../context";
22
import { LeftBar } from "../graphics/left_bar";
3-
import { layerToName } from "../types/devices/layer";
3+
import { layerToName } from "../types/layer";
44
import { deselectElement, saveToLocalStorage } from "../types/viewportManager";
55
import { createLayerSelector } from "../graphics/canvas";
66

@@ -53,7 +53,7 @@ export class LayerHandler {
5353
if (!currentLayer || !this.layerDropdown) return;
5454

5555
this.layerDropdown.setValue(currentLayer); // update dropdown
56-
console.log(`Dropdown updated to layer: ${currentLayer}`);
56+
console.debug(`Dropdown updated to layer: ${currentLayer}`);
5757
}
5858

5959
private selectNewLayer(selectedLayer: string | null) {
@@ -63,7 +63,7 @@ export class LayerHandler {
6363
this.layerDropdown.setValue(selectedLayer);
6464
}
6565

66-
console.log(`Layer selected: ${selectedLayer}`);
66+
console.debug(`Layer selected: ${selectedLayer}`);
6767
this.ctx.changeViewGraph(selectedLayer);
6868
saveToLocalStorage(this.ctx);
6969
this.leftBar.setButtonsByLayer(selectedLayer);

‎src/handlers/triggers.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { DataGraph } from "../types/graphs/datagraph";
1212
// Function to create a new network
1313
export const triggerNew = (ctx: GlobalContext) => {
1414
deselectElement(); // Deselect any currently selected element
15-
ctx.load(new DataGraph()); // Load a new empty DataGraph into the context
15+
ctx.load(new DataGraph(ctx)); // Load a new empty DataGraph into the context
1616
};
1717

1818
// Function to save the network

‎src/packets/ethernet.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { CRC32 } from "@tsxper/crc32";
2-
import { Layer } from "../types/devices/layer";
2+
import { Layer } from "../types/layer";
33

44
// From https://en.wikipedia.org/wiki/EtherType
55
export const IP_PROTOCOL_TYPE = 0x0800;

‎src/packets/icmp.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ICMP_PROTOCOL_NUMBER, IpPayload, computeIpChecksum } from "./ip";
2-
import { Layer } from "../types/devices/layer";
2+
import { Layer } from "../types/layer";
33

44
const ICMP_WARNING =
55
"ICMP operates directly on top of IP at the Network layer, bypassing the Transport layer (TCP/UDP). This is because ICMP is primarily used for network diagnostics and error reporting, not for end-to-end data transport.";
@@ -15,7 +15,7 @@ export const ICMP_REPLY_TYPE_NUMBER = 0;
1515
// +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
1616
// | variant data |
1717
// +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
18-
abstract class IcmpPacket implements IpPayload {
18+
export abstract class IcmpPacket implements IpPayload {
1919
// 8 bits
2020
type: number;
2121

‎src/packets/ip.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { FramePayload, IP_PROTOCOL_TYPE } from "./ethernet";
2-
import { Layer } from "../types/devices/layer";
2+
import { Layer } from "../types/layer";
33

44
// Taken from here: https://en.wikipedia.org/wiki/List_of_IP_protocol_numbers
55
export const ICMP_PROTOCOL_NUMBER = 1;

‎src/packets/tcp.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
IpPayload,
55
TCP_PROTOCOL_NUMBER,
66
} from "./ip";
7-
import { Layer } from "../types/devices/layer";
7+
import { Layer } from "../types/layer";
88

99
export class Flags {
1010
// Urgent Pointer field significant

0 commit comments

Comments
 (0)