feat: add dash animation to link

Author: byandrev

src/animateNode.js

@@ -21,15 +21,23 @@ function animateNode(
     el.attributes.labels[0].attrs.text.text.split(",").includes(symbol)
   );
 
-  if (currentLink) currentLink.attr("line/stroke", "orange");
+  if (currentLink) {
+    currentLink.attr("line/stroke", "orange");
+    const svg = document.querySelector(`g[model-id="${currentLink.id}"]`);
+    svg.classList.add("current");
+  }
 
   setTimeout(() => {
     data.attr("body/stroke", "black");
 
     if (!isFinal) data.attr("body/fill", "#ffffff");
     else data.attr("body/fill", FILL_NODE_FINAL);
 
-    if (currentLink) currentLink.attr("line/stroke", "black");
+    if (currentLink) {
+      currentLink.attr("line/stroke", "black");
+      const svg = document.querySelector(`g[model-id="${currentLink.id}"]`);
+      svg.classList.remove("current");
+    }
 
     document
       .querySelector("#string-out")

src/styles.css

@@ -12,6 +12,18 @@ input:focus {
   border-bottom: 2px #e5e7eb solid !important;
 }
 
+.joint-link.current path {
+  stroke-dasharray: 5;
+  stroke-dashoffset: 10;
+  animation: dash 0.5s infinite linear;
+}
+
+@keyframes dash {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
 .split {
   display: flex;
   flex-direction: row;