Introduce the FSM editor

src/editor/GraphEditor.ts

@@ -89,6 +89,7 @@ export class GraphEditor extends HTMLElement {
         }
         const [x, y] = d3.pointer(event, this.canvas!.node());
         this.createNode(x, y);
+        this.fireOnChange();
       },
     );
     initMarkers(this.canvas, this.config);
@@ -171,6 +172,7 @@ export class GraphEditor extends HTMLElement {
     }
     event.preventDefault();
     if (this.graph.createLink(source.id, target.id) !== null) {
+      this.fireOnChange();
       this.restart();
     }
   }
@@ -193,12 +195,14 @@ export class GraphEditor extends HTMLElement {
             const transition = prompt('Transition');
             if (transition !== null) {
               d.transition = transition;
+              this.fireOnChange();
               this.restart();
             }
           })
           .on('contextmenu', (event: MouseEvent, d: Link) => {
             event.preventDefault();
             this.graph.removeLink(d);
+            this.fireOnChange();
             this.restart();
           });
       }
@@ -230,14 +234,17 @@ export class GraphEditor extends HTMLElement {
             this.moveMenu(event, [
               new MenuAction('Start', () => d.start, () => {
                 d.start = !d.start;
+                this.fireOnChange();
                 this.restart();
               }),
               new MenuAction('Accepting', () => d.accepting, () => {
                 d.accepting = !d.accepting;
+                this.fireOnChange();
                 this.restart();
               }),
               new MenuAction('Delete', () => false, () => {
                 this.graph.removeNode(d);
+                this.fireOnChange();
                 this.resetDraggableLink();
                 this.restart();
               }),
@@ -439,6 +446,10 @@ export class GraphEditor extends HTMLElement {
     e.preventDefault();
     this.menu.setAttribute('hidden', 'hidden');
   }
+
+  private fireOnChange() {
+    this.dispatchEvent(new Event('change'));
+  }
 }
 
 type NodeSelection = d3.Selection<