diff --git a/src/context.ts b/src/context.ts
new file mode 100644
index 00000000..a4c4e94d
--- /dev/null
+++ b/src/context.ts
@@ -0,0 +1,66 @@
+import { Viewport } from "./graphics/viewport";
+import { DataGraph } from "./types/graphs/datagraph";
+import { ViewGraph } from "./types/graphs/viewgraph";
+import {
+ loadFromLocalStorage,
+ saveToLocalStorage,
+} from "./types/viewportManager";
+import { Layer } from "./types/devices/device";
+
+export class GlobalContext {
+ private viewport: Viewport = null;
+ private datagraph: DataGraph;
+ private viewgraph: ViewGraph;
+ private saveIntervalId: NodeJS.Timeout | null = null;
+
+ initialize(viewport: Viewport) {
+ this.viewport = viewport;
+ loadFromLocalStorage(this);
+ }
+
+ private setNetWork(datagraph: DataGraph, layer: Layer) {
+ this.datagraph = datagraph;
+ this.viewport.clear();
+ this.viewgraph = new ViewGraph(this.datagraph, this.viewport, layer);
+ }
+
+ load(datagraph: DataGraph, layer: Layer = Layer.Link) {
+ this.setNetWork(datagraph, layer);
+ this.setupAutoSave();
+ saveToLocalStorage(this);
+ }
+
+ getViewport() {
+ return this.viewport;
+ }
+
+ getViewGraph() {
+ return this.viewgraph;
+ }
+
+ getDataGraph() {
+ return this.datagraph;
+ }
+
+ private setupAutoSave() {
+ this.clearAutoSave();
+
+ this.datagraph.subscribeChanges(() => {
+ if (this.saveIntervalId) {
+ clearInterval(this.saveIntervalId);
+ }
+ this.saveIntervalId = setInterval(() => {
+ saveToLocalStorage(this);
+ clearInterval(this.saveIntervalId);
+ }, 100);
+ });
+ }
+
+ private clearAutoSave() {
+ // Limpia el intervalo y evita duplicados
+ if (this.saveIntervalId) {
+ clearInterval(this.saveIntervalId);
+ this.saveIntervalId = null;
+ }
+ }
+}
diff --git a/src/graphics/left_bar.ts b/src/graphics/left_bar.ts
new file mode 100644
index 00000000..4e425442
--- /dev/null
+++ b/src/graphics/left_bar.ts
@@ -0,0 +1,25 @@
+export class LeftBar {
+ private leftBar: HTMLElement;
+
+ constructor(leftBar: HTMLElement) {
+ this.leftBar = leftBar;
+ }
+
+ static getFrom(document: Document) {
+ return new LeftBar(document.getElementById("left-bar"));
+ }
+
+ addButton(src: string, onClick: () => void, label: string) {
+ const button = document.createElement("button");
+ button.classList.add("icon-button");
+ button.setAttribute("title", label); // Shows Text
+
+ button.onclick = onClick;
+ this.leftBar.appendChild(button);
+
+ const img = document.createElement("img");
+ img.src = src;
+ img.classList.add("icon-img");
+ button.appendChild(img);
+ }
+}
diff --git a/src/graphics/right_bar.ts b/src/graphics/right_bar.ts
new file mode 100644
index 00000000..fd8e3f65
--- /dev/null
+++ b/src/graphics/right_bar.ts
@@ -0,0 +1,117 @@
+export class RightBar {
+ private static instance: RightBar | null = null; // Unique instance
+ private rightBar: HTMLElement;
+
+ private constructor(rightBar: HTMLElement) {
+ this.rightBar = rightBar;
+ this.initializeBaseContent();
+ }
+
+ // Static method to get the unique instance of RightBar
+ static getInstance() {
+ // If an instance already exists, return it. If not, create it.
+ if (!RightBar.instance) {
+ const rightBarElement = document.getElementById("right-bar");
+ if (!rightBarElement) {
+ console.error("Element with ID 'right-bar' not found.");
+ return null;
+ }
+ RightBar.instance = new RightBar(rightBarElement);
+ }
+ return RightBar.instance;
+ }
+
+ // Initializes the base title and info container (called only once)
+ private initializeBaseContent() {
+ const title = document.createElement("h2");
+ title.textContent = "Information";
+ this.rightBar.appendChild(title);
+
+ const infoContent = document.createElement("div");
+ infoContent.id = "info-content";
+ this.rightBar.appendChild(infoContent);
+ }
+
+ // Method to clear only the content of info-content
+ clearContent() {
+ const infoContent = this.rightBar.querySelector("#info-content");
+ if (infoContent) {
+ infoContent.innerHTML = ""; // Clears only the content of info-content
+ }
+ }
+
+ // Shows specific information of an element in info-content
+ renderInfo(title: string, info: { label: string; value: string }[]) {
+ this.clearContent(); // Clears before adding new content
+
+ const infoContent = document.getElementById("info-content");
+ if (infoContent) {
+ const header = document.createElement("h3");
+ header.textContent = title;
+ infoContent.appendChild(header);
+
+ info.forEach((item) => {
+ const p = document.createElement("p");
+ p.innerHTML = `${item.label}: ${item.value}`;
+ infoContent.appendChild(p);
+ });
+ }
+ }
+
+ // Adds a standard button to the right-bar
+ addButton(
+ text: string,
+ onClick: () => void,
+ buttonClass = "right-bar-button",
+ toggleSelected = false,
+ ) {
+ const infoContent = document.getElementById("info-content");
+ if (infoContent) {
+ const button = document.createElement("button");
+ button.classList.add(...buttonClass.split(" "));
+ button.textContent = text;
+ button.onclick = () => {
+ onClick();
+ if (toggleSelected) {
+ button.classList.toggle("selected-button"); // Changes color on click
+ }
+ };
+ infoContent.appendChild(button);
+ }
+ }
+
+ // Adds a select dropdown to the right-bar
+ addDropdown(
+ label: string,
+ options: { value: string; text: string }[],
+ selectId?: string,
+ ) {
+ const infoContent = document.getElementById("info-content");
+ const container = document.createElement("div");
+ container.classList.add("dropdown-container");
+
+ const labelElement = document.createElement("label");
+ labelElement.textContent = label;
+ labelElement.classList.add("right-bar-label");
+
+ const select = document.createElement("select");
+ select.classList.add("right-bar-select");
+ if (selectId) select.id = selectId;
+
+ options.forEach((optionData) => {
+ const option = document.createElement("option");
+ option.value = optionData.value;
+ option.textContent = optionData.text;
+ select.appendChild(option);
+ });
+
+ // Default onchange behavior: logs the selected value
+ select.onchange = () => {
+ console.log(`Selected ${label}:`, select.value);
+ };
+
+ container.appendChild(labelElement);
+ container.appendChild(select);
+ infoContent.appendChild(container);
+ }
+}
diff --git a/src/graphics/viewport.ts b/src/graphics/viewport.ts
new file mode 100644
index 00000000..b7160774
--- /dev/null
+++ b/src/graphics/viewport.ts
@@ -0,0 +1,75 @@
+import { Graphics, EventSystem } from "pixi.js";
+import * as pixi_viewport from "pixi-viewport";
+import { selectElement } from "../types/viewportManager";
+
+const WORLD_WIDTH = 10000;
+const WORLD_HEIGHT = 10000;
+
+class Background extends Graphics {
+ constructor() {
+ super();
+ this.rect(0, 0, WORLD_WIDTH, WORLD_HEIGHT).fill(0xe3e2e1);
+ this.zIndex = 0;
+ }
+
+ resize(width: number, height: number) {
+ this.width = width;
+ this.height = height;
+ }
+}
+
+export class Viewport extends pixi_viewport.Viewport {
+ static usedPlugins = ["drag", "pinch"];
+
+ constructor(events: EventSystem) {
+ super({
+ worldWidth: WORLD_WIDTH,
+ worldHeight: WORLD_HEIGHT,
+ events: events,
+ });
+ this.moveCenter(WORLD_WIDTH / 2, WORLD_HEIGHT / 2);
+ this.sortableChildren = true;
+ this.initializeMovement();
+
+ this.addChild(new Background());
+
+ this.on("click", (event) => {
+ // If the click target is the viewport itself, deselect any selected element
+ if (event.target === this) {
+ selectElement(null);
+ }
+ });
+ }
+
+ clear() {
+ this.removeChildren();
+ this.addChild(new Background());
+ this.moveCenter(WORLD_WIDTH / 2, WORLD_HEIGHT / 2);
+ }
+
+ private initializeMovement() {
+ this.drag()
+ .pinch()
+ .wheel()
+ .clamp({ direction: "all" })
+ // TODO: revisit when all icons are finalized
+ .clampZoom({
+ minHeight: 200,
+ minWidth: 200,
+ maxWidth: WORLD_WIDTH / 2,
+ maxHeight: WORLD_HEIGHT / 2,
+ });
+ }
+
+ enableMovement() {
+ for (const plugin of Viewport.usedPlugins) {
+ this.plugins.resume(plugin);
+ }
+ }
+
+ disableMovement() {
+ for (const plugin of Viewport.usedPlugins) {
+ this.plugins.pause(plugin);
+ }
+ }
+}
diff --git a/src/index.ts b/src/index.ts
index 2fc2b51f..990dafa3 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,322 +1,30 @@
-// Doing this includes the file in the build
-import "./style.css";
-
-// Assets
-import RouterSvg from "./assets/router.svg";
-import ServerSvg from "./assets/server.svg";
-import ComputerSvg from "./assets/pc.svg";
-import PlaySvg from "./assets/play-icon.svg";
-import PauseSvg from "./assets/pause-icon.svg";
+import { Application, Assets } from "pixi.js";
-import { Application, Graphics, EventSystem, Assets } from "pixi.js";
-
-import * as pixi_viewport from "pixi-viewport";
-import { ViewGraph } from "./types/graphs/viewgraph";
import {
AddDevice,
loadFromFile,
loadFromLocalStorage,
saveToFile,
- saveToLocalStorage,
- selectElement,
} from "./types/viewportManager";
import { DataGraph } from "./types/graphs/datagraph";
import { Packet } from "./types/packet";
-import { DeviceType, Layer } from "./types/devices/device";
-
-const WORLD_WIDTH = 10000;
-const WORLD_HEIGHT = 10000;
-
-// > context.ts
-
-export class GlobalContext {
- private viewport: Viewport = null;
- private datagraph: DataGraph;
- private viewgraph: ViewGraph;
- private saveIntervalId: NodeJS.Timeout | null = null;
-
- initialize(viewport: Viewport) {
- this.viewport = viewport;
- loadFromLocalStorage(this);
- }
-
- private setNetWork(datagraph: DataGraph, layer: Layer) {
- this.datagraph = datagraph;
- this.viewport.clear();
- this.viewgraph = new ViewGraph(this.datagraph, this.viewport, layer);
- }
-
- load(datagraph: DataGraph, layer: Layer = Layer.Link) {
- this.setNetWork(datagraph, layer);
- this.setupAutoSave();
- saveToLocalStorage(this);
- }
-
- getViewport() {
- return this.viewport;
- }
-
- getViewGraph() {
- return this.viewgraph;
- }
-
- getDataGraph() {
- return this.datagraph;
- }
-
- private setupAutoSave() {
- this.clearAutoSave();
-
- this.datagraph.subscribeChanges(() => {
- if (this.saveIntervalId) {
- clearInterval(this.saveIntervalId);
- }
- this.saveIntervalId = setInterval(() => {
- saveToLocalStorage(this);
- clearInterval(this.saveIntervalId);
- }, 100);
- });
- }
-
- private clearAutoSave() {
- // Limpia el intervalo y evita duplicados
- if (this.saveIntervalId) {
- clearInterval(this.saveIntervalId);
- this.saveIntervalId = null;
- }
- }
-
- // (!) For layer abstraction functionality
- // changeViewGraph(layer: string) {
- // this.setNetWork(this.datagraph, layerFromName(layer));
- // }
-}
-
-// > graphics.ts
-
-class Background extends Graphics {
- constructor() {
- super();
- this.rect(0, 0, WORLD_WIDTH, WORLD_HEIGHT).fill(0xe3e2e1);
- this.zIndex = 0;
- }
-
- resize(width: number, height: number) {
- this.width = width;
- this.height = height;
- }
-}
-
-export class Viewport extends pixi_viewport.Viewport {
- static usedPlugins = ["drag", "pinch"];
-
- constructor(events: EventSystem) {
- super({
- worldWidth: WORLD_WIDTH,
- worldHeight: WORLD_HEIGHT,
- events: events,
- });
- this.moveCenter(WORLD_WIDTH / 2, WORLD_HEIGHT / 2);
- this.sortableChildren = true;
- this.initializeMovement();
-
- this.addChild(new Background());
-
- this.on("click", (event) => {
- // If the click target is the viewport itself, deselect any selected element
- if (event.target === this) {
- selectElement(null);
- }
- });
- }
-
- clear() {
- this.removeChildren();
- this.addChild(new Background());
- this.moveCenter(WORLD_WIDTH / 2, WORLD_HEIGHT / 2);
- }
-
- private initializeMovement() {
- this.drag()
- .pinch()
- .wheel()
- .clamp({ direction: "all" })
- // TODO: revisit when all icons are finalized
- .clampZoom({
- minHeight: 200,
- minWidth: 200,
- maxWidth: WORLD_WIDTH / 2,
- maxHeight: WORLD_HEIGHT / 2,
- });
- }
-
- enableMovement() {
- for (const plugin of Viewport.usedPlugins) {
- this.plugins.resume(plugin);
- }
- }
-
- disableMovement() {
- for (const plugin of Viewport.usedPlugins) {
- this.plugins.pause(plugin);
- }
- }
-}
+import { DeviceType } from "./types/devices/device";
+import { LeftBar } from "./graphics/left_bar";
+import { RightBar } from "./graphics/right_bar";
+import { Viewport } from "./graphics/viewport";
+import { GlobalContext } from "./context";
-// > left_bar.ts
-
-class LeftBar {
- private leftBar: HTMLElement;
-
- constructor(leftBar: HTMLElement) {
- this.leftBar = leftBar;
- }
-
- static getFrom(document: Document) {
- return new LeftBar(document.getElementById("left-bar"));
- }
-
- addButton(src: string, onClick: () => void, label: string) {
- const button = document.createElement("button");
- button.classList.add("icon-button");
- button.setAttribute("title", label); // Shows Text
-
- button.onclick = onClick;
- this.leftBar.appendChild(button);
-
- const img = document.createElement("img");
- img.src = src;
- img.classList.add("icon-img");
- button.appendChild(img);
- }
-}
-
-export class RightBar {
- private static instance: RightBar | null = null; // Unique instance
- private rightBar: HTMLElement;
-
- private constructor(rightBar: HTMLElement) {
- this.rightBar = rightBar;
- this.initializeBaseContent();
- }
-
- // Static method to get the unique instance of RightBar
- static getInstance() {
- // If an instance already exists, return it. If not, create it.
- if (!RightBar.instance) {
- const rightBarElement = document.getElementById("right-bar");
- if (!rightBarElement) {
- console.error("Element with ID 'right-bar' not found.");
- return null;
- }
- RightBar.instance = new RightBar(rightBarElement);
- }
- return RightBar.instance;
- }
-
- // Initializes the base title and info container (called only once)
- private initializeBaseContent() {
- const title = document.createElement("h2");
- title.textContent = "Information";
- this.rightBar.appendChild(title);
-
- const infoContent = document.createElement("div");
- infoContent.id = "info-content";
- this.rightBar.appendChild(infoContent);
- }
-
- // Method to clear only the content of info-content
- clearContent() {
- const infoContent = this.rightBar.querySelector("#info-content");
- if (infoContent) {
- infoContent.innerHTML = ""; // Clears only the content of info-content
- }
- }
-
- // Shows specific information of an element in info-content
- renderInfo(title: string, info: { label: string; value: string }[]) {
- this.clearContent(); // Clears before adding new content
-
- const infoContent = document.getElementById("info-content");
- if (infoContent) {
- const header = document.createElement("h3");
- header.textContent = title;
- infoContent.appendChild(header);
-
- info.forEach((item) => {
- const p = document.createElement("p");
- p.innerHTML = `${item.label}: ${item.value}`;
- infoContent.appendChild(p);
- });
- }
- }
-
- // Adds a standard button to the right-bar
- addButton(
- text: string,
- onClick: () => void,
- buttonClass = "right-bar-button",
- toggleSelected = false,
- ) {
- const infoContent = document.getElementById("info-content");
- if (infoContent) {
- const button = document.createElement("button");
- button.classList.add(...buttonClass.split(" "));
- button.textContent = text;
- button.onclick = () => {
- onClick();
- if (toggleSelected) {
- button.classList.toggle("selected-button"); // Changes color on click
- }
- };
- infoContent.appendChild(button);
- }
- }
-
- // Adds a select dropdown to the right-bar
- addDropdown(
- label: string,
- options: { value: string; text: string }[],
- selectId?: string,
- ) {
- const infoContent = document.getElementById("info-content");
- const container = document.createElement("div");
- container.classList.add("dropdown-container");
-
- const labelElement = document.createElement("label");
- labelElement.textContent = label;
- labelElement.classList.add("right-bar-label");
-
- const select = document.createElement("select");
- select.classList.add("right-bar-select");
- if (selectId) select.id = selectId;
-
- options.forEach((optionData) => {
- const option = document.createElement("option");
- option.value = optionData.value;
- option.textContent = optionData.text;
- select.appendChild(option);
- });
-
- // Default onchange behavior: logs the selected value
- select.onchange = () => {
- console.log(`Selected ${label}:`, select.value);
- };
-
- container.appendChild(labelElement);
- container.appendChild(select);
- infoContent.appendChild(container);
- }
-}
-
-// > index.ts
+// Assets
+// Doing this includes the file in the build
+import "./style.css";
+import RouterSvg from "./assets/router.svg";
+import ServerSvg from "./assets/server.svg";
+import ComputerSvg from "./assets/pc.svg";
+import PlaySvg from "./assets/play-icon.svg";
+import PauseSvg from "./assets/pause-icon.svg";
// IIFE to avoid errors
(async () => {
- const lBar = document.getElementById("left-bar");
- const rBar = document.getElementById("right-bar");
- const tBar = document.getElementById("top-bar");
-
// Initialization
const app = new Application();
await app.init({
@@ -365,6 +73,10 @@ export class RightBar {
// Ticker logic
// app.ticker.add(() => { });
+ const lBar = document.getElementById("left-bar");
+ const rBar = document.getElementById("right-bar");
+ const tBar = document.getElementById("top-bar");
+
// Resize logic
function resize() {
const leftBarWidth = lBar ? lBar.offsetWidth : 100;
diff --git a/src/types/common.ts b/src/types/common.ts
new file mode 100644
index 00000000..09614ba4
--- /dev/null
+++ b/src/types/common.ts
@@ -0,0 +1,4 @@
+export interface Position {
+ x: number;
+ y: number;
+}
diff --git a/src/types/devices/device.ts b/src/types/devices/device.ts
index 2d6334d1..e5576516 100644
--- a/src/types/devices/device.ts
+++ b/src/types/devices/device.ts
@@ -13,8 +13,9 @@ import {
refreshElement,
selectElement,
} from "./../viewportManager";
-import { RightBar } from "../../index";
+import { RightBar } from "../../graphics/right_bar";
import { Colors, ZIndexLevels } from "../../utils";
+import { Position } from "../common";
export const DEVICE_SIZE = 20;
@@ -53,10 +54,9 @@ export class Device extends Sprite {
id: number,
svg: string,
viewgraph: ViewGraph,
- position: { x: number; y: number } | null = null,
+ position: Position,
) {
- const texture = Texture.from(svg);
- super(texture);
+ super(Texture.from(svg));
this.rightbar = RightBar.getInstance();
this.id = id;
@@ -64,19 +64,8 @@ export class Device extends Sprite {
this.anchor.set(0.5);
- // Use specified coordinates or center of the world
- const stage = this.viewgraph.getViewport();
- if (position) {
- this.x = position.x;
- this.y = position.y;
- } else {
- const worldCenter = stage.toWorld(
- stage.screenWidth / 2,
- stage.screenHeight / 2,
- );
- this.x = worldCenter.x;
- this.y = worldCenter.y;
- }
+ this.x = position.x;
+ this.y = position.y;
this.eventMode = "static";
this.interactive = true;
diff --git a/src/types/devices/pc.ts b/src/types/devices/pc.ts
index 8fbc30fa..5ec958d5 100644
--- a/src/types/devices/pc.ts
+++ b/src/types/devices/pc.ts
@@ -3,13 +3,10 @@
import { Device, DeviceType, Layer } from "./device";
import { ViewGraph } from "../graphs/viewgraph";
import PcImage from "../../assets/pc.svg";
+import { Position } from "../common";
export class Pc extends Device {
- constructor(
- id: number,
- viewgraph: ViewGraph,
- position: { x: number; y: number } | null = null,
- ) {
+ constructor(id: number, viewgraph: ViewGraph, position: Position) {
super(id, PcImage, viewgraph, position);
}
diff --git a/src/types/devices/router.ts b/src/types/devices/router.ts
index fe003578..a811e706 100644
--- a/src/types/devices/router.ts
+++ b/src/types/devices/router.ts
@@ -3,13 +3,10 @@
import { Device, DeviceType, Layer } from "./device";
import { ViewGraph } from "../graphs/viewgraph";
import RouterImage from "../../assets/router.svg";
+import { Position } from "../common";
export class Router extends Device {
- constructor(
- id: number,
- viewgraph: ViewGraph,
- position: { x: number; y: number } | null = null,
- ) {
+ constructor(id: number, viewgraph: ViewGraph, position: Position) {
super(id, RouterImage, viewgraph, position);
}
diff --git a/src/types/devices/server.ts b/src/types/devices/server.ts
index 766acce4..f55a489a 100644
--- a/src/types/devices/server.ts
+++ b/src/types/devices/server.ts
@@ -3,13 +3,10 @@
import { Device, DeviceType, Layer } from "./device";
import { ViewGraph } from "../graphs/viewgraph";
import ServerImage from "../../assets/server.svg";
+import { Position } from "../common";
export class Server extends Device {
- constructor(
- id: number,
- viewgraph: ViewGraph,
- position: { x: number; y: number } | null = null,
- ) {
+ constructor(id: number, viewgraph: ViewGraph, position: Position) {
super(id, ServerImage, viewgraph, position);
}
diff --git a/src/types/edge.ts b/src/types/edge.ts
index 9cce068b..88f763f4 100644
--- a/src/types/edge.ts
+++ b/src/types/edge.ts
@@ -1,27 +1,27 @@
-import { Graphics } from "pixi.js";
+import { Graphics, Point } from "pixi.js";
import { ViewGraph } from "./graphs/viewgraph";
import { Device } from "./devices/index"; // Import the Device class
import { deselectElement, selectElement } from "./viewportManager";
-import { RightBar } from "..";
+import { RightBar } from "../graphics/right_bar";
import { Colors, ZIndexLevels } from "../utils";
import { Packet } from "./packet";
-export interface Position {
- x: number;
- y: number;
+export interface EdgeEdges {
+ n1: number;
+ n2: number;
}
export class Edge extends Graphics {
id: number;
connectedNodes: { n1: number; n2: number };
- startPos: Position;
- endPos: Position;
+ startPos: Point;
+ endPos: Point;
viewgraph: ViewGraph;
rightbar: RightBar;
constructor(
id: number,
- connectedNodes: { n1: number; n2: number },
+ connectedNodes: EdgeEdges,
device1: Device,
device2: Device,
viewgraph: ViewGraph,
@@ -41,7 +41,7 @@ export class Edge extends Graphics {
this.on("click", () => selectElement(this));
}
- nodePosition(nodeId: number): Position | undefined {
+ nodePosition(nodeId: number): Point | undefined {
return this.connectedNodes.n1 === nodeId
? this.startPos
: this.connectedNodes.n2 === nodeId
@@ -58,7 +58,7 @@ export class Edge extends Graphics {
}
// Method to draw the line
- public drawEdge(startPos: Position, endPos: Position, color: number) {
+ public drawEdge(startPos: Point, endPos: Point, color: number) {
this.clear();
this.moveTo(startPos.x, startPos.y);
this.lineTo(endPos.x, endPos.y);
@@ -139,14 +139,14 @@ export class Edge extends Graphics {
const offsetX2 = ((device2.width + 5) / 2) * Math.cos(angle);
const offsetY2 = ((device2.height + 5) / 2) * Math.sin(angle);
- const newStartPos: Position = {
- x: device1.x + offsetX1,
- y: device1.y + offsetY1,
- };
- const newEndPos: Position = {
- x: device2.x - offsetX2,
- y: device2.y - offsetY2,
- };
+ const newStartPos: Point = new Point(
+ device1.x + offsetX1,
+ device1.y + offsetY1,
+ );
+ const newEndPos: Point = new Point(
+ device2.x - offsetX2,
+ device2.y - offsetY2,
+ );
this.drawEdge(newStartPos, newEndPos, Colors.Lightblue);
}
diff --git a/src/types/graphs/datagraph.ts b/src/types/graphs/datagraph.ts
index 9c4b3f85..5ed49b49 100644
--- a/src/types/graphs/datagraph.ts
+++ b/src/types/graphs/datagraph.ts
@@ -17,6 +17,12 @@ export interface GraphDataNode {
export type GraphData = GraphDataNode[];
+export interface DeviceInfo {
+ x: number;
+ y: number;
+ type: DeviceType;
+}
+
export class DataGraph {
private devices = new Map();
private idCounter = 1;
@@ -56,7 +62,7 @@ export class DataGraph {
}
// Add a new device to the graph
- addNewDevice(deviceInfo: { x: number; y: number; type: DeviceType }): number {
+ addNewDevice(deviceInfo: DeviceInfo): number {
const id = this.idCounter++;
const graphnode: GraphNode = {
...deviceInfo,
diff --git a/src/types/graphs/viewgraph.ts b/src/types/graphs/viewgraph.ts
index 42fb8159..c6f4ce47 100644
--- a/src/types/graphs/viewgraph.ts
+++ b/src/types/graphs/viewgraph.ts
@@ -1,7 +1,7 @@
import { Device } from "./../devices/index"; // Import the Device class
import { Edge } from "./../edge";
import { DataGraph } from "./datagraph";
-import { Viewport } from "../..";
+import { Viewport } from "../../graphics/viewport";
import { Layer } from "../devices/device";
import { createDevice } from "../devices/utils";
diff --git a/src/types/packet.ts b/src/types/packet.ts
index c5584ea2..70dbe6b1 100644
--- a/src/types/packet.ts
+++ b/src/types/packet.ts
@@ -4,10 +4,11 @@ import {
GraphicsContext,
Ticker,
} from "pixi.js";
-import { Edge, Position } from "./edge";
+import { Edge } from "./edge";
import { deselectElement, isSelected, selectElement } from "./viewportManager";
import { circleGraphicsContext, Colors, ZIndexLevels } from "../utils";
-import { RightBar } from "../index";
+import { RightBar } from "../graphics/right_bar";
+import { Position } from "./common";
const contextPerPacketType: Record = {
IP: circleGraphicsContext(Colors.Green, 0, 0, 5),
diff --git a/src/types/viewportManager.ts b/src/types/viewportManager.ts
index 1bd4cd27..9350037f 100644
--- a/src/types/viewportManager.ts
+++ b/src/types/viewportManager.ts
@@ -1,8 +1,8 @@
-import { GlobalContext } from "./../index";
+import { GlobalContext } from "./../context";
import { DataGraph, GraphData } from "./graphs/datagraph";
import { Device, Pc, Router, Server } from "./devices/index";
import { Edge } from "./edge";
-import { RightBar } from "../index"; // Ensure the path is correct
+import { RightBar } from "../graphics/right_bar";
import { Packet } from "./packet";
import { DeviceType } from "./devices/device";
import { createDevice } from "./devices/utils";
@@ -106,22 +106,14 @@ export function AddRouter(ctx: GlobalContext) {
const viewport = ctx.getViewport();
// Get the center coordinates of the world after zoom
- const worldCenter = viewport.toWorld(
+ const { x, y } = viewport.toWorld(
viewport.screenWidth / 2,
viewport.screenHeight / 2,
);
- const idDevice = datagraph.addNewDevice({
- x: worldCenter.x,
- y: worldCenter.y,
- type: DeviceType.Router,
- });
- const device = datagraph.getDevice(idDevice);
+ const idDevice = datagraph.addNewDevice({ x, y, type: DeviceType.Router });
- const newRouter: Device = new Router(idDevice, viewgraph, {
- x: device.x,
- y: device.y,
- });
+ const newRouter: Device = new Router(idDevice, viewgraph, { x, y });
// Add the RouterNode to the graph
viewgraph.addDevice(newRouter);
@@ -140,22 +132,14 @@ export function AddPc(ctx: GlobalContext) {
const viewport = ctx.getViewport();
// Get the center coordinates of the world after zoom
- const worldCenter = viewport.toWorld(
+ const { x: x, y: y } = viewport.toWorld(
viewport.screenWidth / 2,
viewport.screenHeight / 2,
);
- const idDevice = datagraph.addNewDevice({
- x: worldCenter.x,
- y: worldCenter.y,
- type: DeviceType.Pc,
- });
- const device = datagraph.getDevice(idDevice);
+ const idDevice = datagraph.addNewDevice({ x, y, type: DeviceType.Pc });
- const newPC: Device = new Pc(idDevice, viewgraph, {
- x: device.x,
- y: device.y,
- });
+ const newPC: Device = new Pc(idDevice, viewgraph, { x, y });
// Add the PCNode to the graph
viewgraph.addDevice(newPC);
@@ -172,23 +156,14 @@ export function AddServer(ctx: GlobalContext) {
const viewport = ctx.getViewport();
// Get the center coordinates of the world after zoom
- const worldCenter = viewport.toWorld(
+ const { x, y } = viewport.toWorld(
viewport.screenWidth / 2,
viewport.screenHeight / 2,
);
- const idDevice = datagraph.addNewDevice({
- x: worldCenter.x,
- y: worldCenter.y,
- type: DeviceType.Server,
- });
- const device = datagraph.getDevice(idDevice);
-
- const newServer: Device = new Server(idDevice, viewgraph, {
- x: device.x,
- y: device.y,
- });
+ const idDevice = datagraph.addNewDevice({ x, y, type: DeviceType.Server });
+ const newServer: Device = new Server(idDevice, viewgraph, { x, y });
// Add the ServerNode to the graph
viewgraph.addDevice(newServer);
viewport.addChild(newServer);