Add node labels and tweak node colors

src/editor/GraphEditor.ts

@@ -41,6 +41,7 @@ export class GraphEditor extends HTMLElement {
   private canvas!: Canvas;
   graph = new Graph();
   private node!: NodeSelection;
+  private ids!: NodeSelection;
   private link!: LinkSelection;
   private labels!: LinkSelection;
   private triangles!: NodeSelection;
@@ -95,6 +96,7 @@ export class GraphEditor extends HTMLElement {
     initMarkers(this.canvas, this.config);
     this.draggableLink = createDraggableLink(this.canvas);
     this.node = createNode(this.canvas);
+    this.ids = createIds(this.canvas);
     this.link = createLink(this.canvas);
     this.labels = createLabel(this.canvas);
     this.triangles = createTriangle(this.canvas);
@@ -215,6 +217,7 @@ export class GraphEditor extends HTMLElement {
         text
           .classed('label', true)
           .attr('fill', 'currentColor')
+          .style('pointer-events', 'none')
           .text((d) => d.transition);
         return text;
       },
@@ -277,11 +280,20 @@ export class GraphEditor extends HTMLElement {
         return update;
       },
     );
+
+    this.ids = this.ids.data(this.graph.nodes, (d) => d.id).join(
+      (enter) =>
+        enter.append('text').attr('text-anchor', 'middle').attr('dy', '.35em').style('pointer-events', 'none').text((
+          d,
+        ) => d.id + 1),
+      (update) => update.text((d) => d.id + 1),
+    );
+
     const startNodes = this.graph.nodes.filter((n) => n.start);
     this.triangles = this.triangles.data(startNodes).join(
-      (enter) => {
+      (enter) =>
-        return enter.append('path').classed('triangle', true).classed('start-arrow', true);
+        enter.append('path').classed('triangle', true).classed('start-arrow', true).classed('active', (d) => d.active),
-      },
+      (update) => update.classed('active', (d) => d.active),
     );
     this.simulation.nodes(this.graph.nodes);
     this.simulation.alpha(0.5).restart();
@@ -343,6 +355,7 @@ export class GraphEditor extends HTMLElement {
         return `translate(${x},${y})`;
       },
     );
+    this.ids.attr('transform', (d) => `translate(${d.x},${d.y})`);
     this.triangles.attr(
       'd',
       (d: Node) => {
@@ -463,6 +476,10 @@ function createNode(canvas: Canvas): NodeSelection {
   return canvas.append('g').classed('nodes', true).selectAll('circle');
 }
 
+function createIds(canvas: Canvas): NodeSelection {
+  return canvas.append('g').classed('ids', true).selectAll('text');
+}
+
 type Drag = d3.DragBehavior<SVGGElement, Node, Node>;
 
 function createDrag(simulation: Simulation): Drag {

src/style.css

@@ -140,17 +140,26 @@ graph-editor {
   cursor: pointer;
 }
 .node.active {
+  fill: #a31dfd;
+}
+.node.accepting.active {
   fill: green;
 }
 .start-arrow {
   fill: #007aff;
   stroke: none;
 }
+.start-arrow.active {
+  fill: #a31dfd;
+}
 .node.accepting {
   outline: 5px solid #007aff;
   outline-offset: 4px;
   border-radius: 50%;
 }
+.node.accepting.active {
+  outline: 5px solid green;
+}
 
 .clickbox {
   stroke: rgba(0, 0, 0, 0);