Show package name in overview

metadata/project.json

@@ -1,14 +1,14 @@
 {
   "subprojects": [
     {
-      "name": "sample",
-      "path": "packages/sample",
+      "name": "block",
+      "path": "packages/block",
       "size": 2450,
       "contents": {}
     },
     {
-      "name": "sample",
-      "path": "packages/sample",
+      "name": "client",
+      "path": "packages/client",
       "size": 5600,
       "contents": {}
     }

src/helpers.ts

@@ -30,8 +30,9 @@ export function isColliding(
   );
 }
 
-export function generateEdgeCoords(existingCoordinates: Coordinates[]): Coordinates {
+export function generateEdgeCoords(existingEdges: Edge[]): Coordinates {
   let newCoords: Coordinates;
+  const existingCoordinates = existingEdges.map(({ x, y }) => ({ x, y }));
 
   do {
     newCoords = generateRandomEdgeCoordinates();
@@ -41,23 +42,25 @@ export function generateEdgeCoords(existingCoordinates: Coordinates[]): Coordina
 }
 
 export function generateEdges(subprojects: SubProject[]): Edge[] {
-  let edgeCoords = [];
+  let edges = [];
 
   subprojects.forEach((subproject) => {
-    const coordinates = generateEdgeCoords(edgeCoords);
-    edgeCoords.push({
+    const coordinates = generateEdgeCoords(edges);
+    edges.push({
       x: coordinates.x,
       y: coordinates.y,
       r: getEdgeDimensions(subproject),
+      name: subproject.name,
     });
   });
 
-  return edgeCoords.map(
-    (edgeCoord) =>
+  return edges.map(
+    (edge) =>
       new Edge({
-        x: edgeCoord.x,
-        y: edgeCoord.y,
-        r: edgeCoord.r,
+        x: edge.x,
+        y: edge.y,
+        r: edge.r,
+        name: edge.name,
       })
   );
 }

src/sketchObjects/Edge.ts

@@ -5,15 +5,20 @@ export class Edge {
   x: number;
   y: number;
   r: number;
+  name: string;
 
-  constructor({ x, y, r }: { x: number; y: number; r: number }) {
+  constructor({ x, y, r, name }: { x: number; y: number; r: number; name: string }) {
     this.x = x;
     this.y = y;
     this.r = r;
+    this.name = name;
   }
 
   draw() {
     mp5.fill(mp5.color(colors.grey));
     mp5.ellipse(this.x, this.y, this.r * 2);
+    mp5.textSize(20);
+    mp5.fill(0);
+    mp5.text(this.name, this.x, this.y);
   }
 }