feat: update animation to nodes and links

Author: byandrev

src/afd.js

@@ -6,6 +6,14 @@ function verifyAFD(paper, graph, automata, string) {
   let symbol = string[i];
 
   const interval = setInterval(() => {
+    animateNode(
+      paper,
+      graph,
+      state,
+      symbol,
+      automata.finalStates.includes(state)
+    );
+
     if (i >= string.length) {
       clearInterval(interval);
 
@@ -15,7 +23,7 @@ function verifyAFD(paper, graph, automata, string) {
       }
 
       renderOut("INVALID");
-      renderError("I do not end in a final state")
+      renderError("I do not end in a final state");
       return;
     }
 
@@ -35,14 +43,6 @@ function verifyAFD(paper, graph, automata, string) {
       return;
     }
 
-    animateNode(
-      paper,
-      graph,
-      state,
-      symbol,
-      automata.finalStates.includes(state)
-    );
-
     i++;
     state = isState.nextState;
     symbol = string[i];

src/animateNode.js

@@ -6,14 +6,14 @@ function animateNode(
   state = "q0",
   symbol,
   isFinal,
-  color = "#008080"
+  color = "#f8d6ac"
 ) {
   const data = paper.model
     .getElements()
     .find((el) => el.attributes.attrs.label.text === state);
 
   data.attr("body/stroke", color);
-  data.attr("body/fill", "#21bcbc");
+  data.attr("body/fill", color);
 
   const links = graph.getConnectedLinks(data, { outbound: true });
 

src/styles.css

@@ -6,12 +6,42 @@ input:focus {
   outline: none;
 }
 
+#string-out {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.symbol {
+  position: relative;
+  display: block;
+  transition: all 200ms;
+}
+
+.symbol-active::after {
+  transition: all 200ms;
+  position: absolute;
+  content: "";
+  background-image: url(https://www.transparentpng.com/thumb/up-arrow/m6xCB1-up-arrow-vector.png);
+  background-size: cover;
+  width: 25px;
+  height: 25px;
+  display: block;
+  top: -10;
+  left: -6px;
+}
+
+/* JOINTJS */
+
 .joint-paper {
   border: none !important;
   background-color: #fff !important;
   border-bottom: 2px #e5e7eb solid !important;
 }
 
+.joint-type-circle ellipse {
+  transition: all 200ms;
+}
+
 .joint-link.current path {
   stroke-dasharray: 5;
   stroke-dashoffset: 10;
@@ -24,6 +54,10 @@ input:focus {
   }
 }
 
+/* END JOINTJS */
+
+/* SPLITJS */
+
 .split {
   display: flex;
   flex-direction: row;
@@ -40,29 +74,9 @@ input:focus {
   cursor: col-resize;
 }
 
-#string-out {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.symbol {
-  position: relative;
-  display: block;
-  transition: all 200ms;
-}
+/* END SPLITJS */
 
-.symbol-active::after {
-  transition: all 200ms;
-  position: absolute;
-  content: "";
-  background-image: url(https://www.transparentpng.com/thumb/up-arrow/m6xCB1-up-arrow-vector.png);
-  background-size: cover;
-  width: 25px;
-  height: 25px;
-  display: block;
-  top: -10;
-  left: -6px;
-}
+/* MODALS */
 
 .modal {
   font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir,
@@ -228,6 +242,8 @@ input:focus {
   will-change: transform;
 }
 
+/* END MODALS */
+
 /* ANIMATIONS */
 .animate__fadeIn {
   opacity: 0;