Switch to LinkerLine for visualization arrows

This allows us to place the arrows inside of the visualization div
instead of the body element. The arrows won't overlap any longer with
the UI controls at the bottom. Also, the position of the arrows does not
need to be updated any longer on every scroll event.

Author: hannesbraun

README.md

@@ -242,6 +242,7 @@ Please report them in the [issue tracker](https://github.com/skogsbaer/write-you
 You can debug the extension from Visual Studio Code:
 
 * `npm install`
+* `npm run build`
 * Open the main folder of the plugin with vscode.
 * Open the file `extension.ts`.
 * Choose "Run" from the menu, then "Start Debugging".

media/programflow-visualization/leader-line.min.js

@@ -0,0 +1,2 @@
+import LinkerLine from "linkerline";
+window.LinkerLine = LinkerLine;

media/programflow-visualization/linkerline.js

@@ -65,9 +65,6 @@ function updateVisualization(traceElem) {
   `;
   const viz = document.getElementById("viz");
   viz.innerHTML = data;
-  viz.addEventListener("scroll", () => {
-    refTags.forEach((tag) => tag.position());
-  });
   viz.scrollTo(0, viz.scrollHeight);
   const stdoutLog = document.getElementById("stdout-log");
   stdoutLog.innerHTML = traceElem[4];
@@ -106,7 +103,10 @@ function updateRefArrows(traceElem) {
   refTags = tags
     .filter((tag) => tag.elem1 && tag.elem2)
     .map((tag) => {
-      return new LeaderLine(tag.elem1, tag.elem2, {
+      return new LinkerLine({
+        parent: document.getElementById("viz"),
+        start: tag.elem1,
+        end: tag.elem2, 
         size: 2,
         path: "magnet",
         startSocket: "right",