From 40d4a2364e12276b540fe4521d333d44a29a797e Mon Sep 17 00:00:00 2001
From: Dennis Schoepf <me@dnsc.io>
Date: Wed, 21 Jul 2021 16:08:39 +0200
Subject: [PATCH] Show package name in overview

---
 metadata/project.json     |  8 ++++----
 src/helpers.ts            | 21 ++++++++++++---------
 src/sketchObjects/Edge.ts |  7 ++++++-
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/metadata/project.json b/metadata/project.json
index 52cd135..c2e77ae 100644
--- a/metadata/project.json
+++ b/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": {}
     }
diff --git a/src/helpers.ts b/src/helpers.ts
index df5d00e..c5230a1 100644
--- a/src/helpers.ts
+++ b/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,
       })
   );
 }
diff --git a/src/sketchObjects/Edge.ts b/src/sketchObjects/Edge.ts
index 933b713..a521ee8 100644
--- a/src/sketchObjects/Edge.ts
+++ b/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);
   }
 }