refactor: set SVG size from code and CSS (#122)

This PR moves the device size from the SVG source to the CSS and JS
code. As part of this it also removes some unused code. This also
includes making the `Sprite` a field of `Device`, instead of its parent
class.

Author: MegaRedHand

src/assets/pc.svg

@@ -78,20 +78,14 @@ async function loadAssets(otherPromises: Promise<void>[]) {
   const leftBar = LeftBar.getFrom(document, ctx);
   leftBar.setButtonsByLayer(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");
 
   // Resize logic
   function resize() {
-    const leftBarWidth = lBar ? lBar.offsetWidth : 100;
-    const rightBarWidth = rBar ? rBar.offsetWidth : 250;
-    const topBarHeight = tBar ? tBar.offsetHeight : 40;
-
-    const newWidth = window.innerWidth - leftBarWidth - rightBarWidth;
-    const newHeight = window.innerHeight - topBarHeight;
+    const newWidth = window.innerWidth - lBar.offsetWidth - rBar.offsetWidth;
+    const newHeight = window.innerHeight - tBar.offsetHeight;
 
     app.renderer.resize(newWidth, newHeight);
     viewport.resize(newWidth, newHeight);

src/assets/router.svg

@@ -11,6 +11,12 @@ body {
   background-color: #f2f2f2; /* Sets a light gray background for the page */
 }
 
+/* Make SVGs take all the space from their parent */
+svg {
+  width: 95%;
+  height: 95%;
+}
+
 /* Custom scrollbar styles */
 
 /* Scrollbar width */

src/assets/server.svg

@@ -5,6 +5,7 @@ import {
   Graphics,
   TextStyle,
   Text,
+  Container,
 } from "pixi.js";
 import { ViewGraph } from "./../graphs/viewgraph";
 import {
@@ -27,8 +28,6 @@ import { CreateDevice } from "./utils";
 
 export { Layer } from "./layer";
 
-export const DEVICE_SIZE = 20;
-
 export enum DeviceType {
   Router = 0,
   Host = 1,
@@ -46,7 +45,9 @@ export function layerFromType(type: DeviceType) {
   }
 }
 
-export abstract class Device extends Sprite {
+export abstract class Device extends Container {
+  private sprite: Sprite;
+
   readonly id: DeviceId;
   readonly viewgraph: ViewGraph;
   connections = new Set<DeviceId>();
@@ -57,6 +58,13 @@ export abstract class Device extends Sprite {
   static connectionTarget: Device | null = null;
   static startPosition: Position | null = null;
 
+  get width(): number {
+    return this.sprite.width;
+  }
+  get height(): number {
+    return this.sprite.height;
+  }
+
   ip: IpAddress;
   ipMask: IpAddress;
 
@@ -68,19 +76,24 @@ export abstract class Device extends Sprite {
 
   constructor(
     id: DeviceId,
-    svg: string,
+    texture: Texture,
     viewgraph: ViewGraph,
     position: Position,
     ip: IpAddress,
     ipMask: IpAddress,
   ) {
-    super(Texture.from(svg));
+    super();
+
     this.id = id;
     this.viewgraph = viewgraph;
     this.ip = ip;
     this.ipMask = ipMask;
 
-    this.anchor.set(0.5);
+    this.sprite = new Sprite(texture);
+
+    this.sprite.anchor.set(0.5);
+    this.sprite.setSize(50);
+    this.addChild(this.sprite);
 
     this.x = position.x;
     this.y = position.y;
@@ -105,10 +118,11 @@ export abstract class Device extends Sprite {
       fontSize: 12,
       fill: Colors.Black,
       align: "center",
+      fontWeight: "bold",
     });
     const idText = new Text({ text: `ID: ${this.id}`, style: textStyle });
     idText.anchor.set(0.5);
-    idText.y = this.height - 15;
+    idText.y = this.height * 0.8;
     idText.zIndex = ZIndexLevels.Label;
     this.addChild(idText); // Add the ID text as a child of the device
   }
@@ -131,11 +145,6 @@ export abstract class Device extends Sprite {
     this.connections.delete(id);
   }
 
-  resize(sprite: Sprite): void {
-    sprite.width = sprite.width / 70;
-    sprite.height = sprite.height / DEVICE_SIZE;
-  }
-
   // TODO: Most probably it will be different for each type of device
   handlePacket(packet: Packet) {
     switch (packet.type) {
@@ -229,13 +238,10 @@ export abstract class Device extends Sprite {
     // Create the square as a selection marker
     this.highlightMarker = new Graphics();
 
-    this.highlightMarker.roundRect(
-      -this.width / 2,
-      -this.height / 2,
-      this.width,
-      this.height,
-      5,
-    );
+    // NOTE: we get the original size since pixijs autoscales the sprite's children
+    const { width, height } = this;
+
+    this.highlightMarker.roundRect(-width / 2, -height / 2, width, height, 5);
     this.highlightMarker.stroke({
       width: 3,
       color: Colors.Violet,

src/assets/switch.svg

@@ -15,8 +15,18 @@ import {
   RunningProgram,
 } from "../../programs";
 import { Packet } from "../packet";
+import { Texture } from "pixi.js";
 
 export class Host extends Device {
+  static DEVICE_TEXTURE: Texture;
+
+  static getTexture() {
+    if (!Host.DEVICE_TEXTURE) {
+      Host.DEVICE_TEXTURE = Texture.from(PcImage);
+    }
+    return Host.DEVICE_TEXTURE;
+  }
+
   private runningPrograms = new Map<Pid, Program>();
   private lastProgramId = 0;
 
@@ -27,7 +37,7 @@ export class Host extends Device {
     ip: IpAddress,
     mask: IpAddress,
   ) {
-    super(id, PcImage, viewgraph, position, ip, mask);
+    super(id, Host.getTexture(), viewgraph, position, ip, mask);
     this.loadRunningPrograms();
   }
 

src/index.ts

@@ -6,16 +6,26 @@ import { DeviceInfo, RightBar } from "../../graphics/right_bar";
 import { IpAddress } from "../../packets/ip";
 import { DeviceId, isRouter } from "../graphs/datagraph";
 import { Packet } from "../packet";
+import { Texture } from "pixi.js";
 
 export class Router extends Device {
+  static DEVICE_TEXTURE: Texture;
+
+  static getTexture() {
+    if (!Router.DEVICE_TEXTURE) {
+      Router.DEVICE_TEXTURE = Texture.from(RouterImage);
+    }
+    return Router.DEVICE_TEXTURE;
+  }
+
   constructor(
     id: DeviceId,
     viewgraph: ViewGraph,
     position: Position,
     ip: IpAddress,
     mask: IpAddress,
   ) {
-    super(id, RouterImage, viewgraph, position, ip, mask);
+    super(id, Router.getTexture(), viewgraph, position, ip, mask);
   }
 
   showInfo(): void {

src/styles/global.css

@@ -5,10 +5,20 @@ import { Position } from "../common";
 import { DeviceInfo, RightBar } from "../../graphics/right_bar";
 import { DeviceId } from "../graphs/datagraph";
 import { Packet } from "../packet";
+import { Texture } from "pixi.js";
 
 export class Switch extends Device {
+  static DEVICE_TEXTURE: Texture;
+
+  static getTexture() {
+    if (!Switch.DEVICE_TEXTURE) {
+      Switch.DEVICE_TEXTURE = Texture.from(SwitchImage);
+    }
+    return Switch.DEVICE_TEXTURE;
+  }
+
   constructor(id: DeviceId, viewgraph: ViewGraph, position: Position) {
-    super(id, SwitchImage, viewgraph, position, null, null);
+    super(id, Switch.getTexture(), viewgraph, position, null, null);
   }
 
   showInfo(): void {