#41 - Redraw jumps on every change

src/views/ts/nodeView.ts

@@ -12,7 +12,9 @@ import { NodeJump } from "../../models/NodeJump";
 const sceneWidth = 500;         // For comparing scale in responsiveSize()
 const nodeMap = new Map<number,Konva.Group>();      // Map for storing all nodes.
 const miniNodeMap = new Map<number,Konva.Group>();
-const jumpMap = new Map<number, Konva.Line>();
+
+const jumpMap = new Map<Array<number>, Konva.Arrow>();
+
 let selectedNode: Konva.Group;  // Currently selected node for highlighting purposes.
 let miniNodeY = 5;              // Variable to increment height of miniNodes.
 let miniMapDetails: {x: number, y: number, scale: number};          // Global variable for storing the top right of the minimap image.
@@ -248,6 +250,7 @@ export function connectNodes(from: number, to: number): void
     const nodeCenterLength: number = nodeTo.getChildren()[0].width() / 2;
 
     //Draw the line between the center of each node. 
+
     const line = new Konva.Arrow({
         points: [nodeFrom.x() + nodeCenterLength, nodeFrom.y() + nodeCenterLength, nodeTo.x() + nodeCenterLength, nodeTo.y() + nodeCenterLength],
         stroke: "black",
@@ -257,6 +260,10 @@ export function connectNodes(from: number, to: number): void
         fill: "black",
         perfectDrawEnabled: false,
     });
+    //Add to the map of jumps
+    jumpMap.set([from, to], line);
+
+    //Add to the layer
     layer.add(line);
     line.moveToBottom();
     layer.draw;
@@ -637,13 +644,102 @@ export function addNode(node: YarnNode) : void
  */
 export function receiveJumps(jumps: NodeJump[]) : void
 {
-    for (let i = 0; i < jumps.length; i++) 
+
+    //DESTROY ALL THE ARROWS
+    jumpMap.forEach(arrow => {
+        arrow.destroy();
+    });
+
+    //CLEAR THE MAP
+    jumpMap.clear();
+
+    //DRAW ALL THE NEW ARROWS
+    for (let i = 0; i < jumps.length ; i++)
     {
         connectNodes(jumps[i].getSource(), jumps[i].getTarget());
     }
+    console.log("jumpMapLength HERE "+jumpMap.size); // ! DEBUG
+    console.log("jumps param length here HERE "+jumps.length);
+    /*
+    const oldJumps = Array.from(jumpMap.keys());
+    const newJumps = new Array<Array<number>>();
+
+    //Receive new jumps from param for easier comparison
+    for (let i = 0; i < jumps.length; i++) 
+    {
+
+        newJumps[i] = [jumps[i].getSource(), jumps[i].getTarget()];
+        console.log("THIS IS NEW JUMPS " + newJumps[i]);
+    }
+    for (let i = 0; i < oldJumps.length ; i++) 
+    {
+        console.log("THIS IS OLD JUMPS" + oldJumps[i]);
+    }
+    //JUMPS THAT EXIST IN newJumps BUT NOT oldJumps
+    const addedJumps = new Array<Array<number>>();
+    newJumps.forEach(newJump =>
+    {
+        var contains: Boolean = false;
+        oldJumps.forEach(oldJump =>
+        {
+           if(oldJump[0] == newJump[0] && oldJump[1] == newJump[1])
+           {
+                contains = true;
+           }
+        });
+
+        if(contains == false)
+        {
+            console.log("adding jump " + newJump); // ! DEBUG
+            addedJumps.push(newJump);
+        }
+    });
+    
+    //JUMPS THAT EXIST IN oldJumps BUT NOT newJumps
+    const deletedJumps = new Array<Array<number>>();
+    oldJumps.forEach(oldJump =>
+    {
+        var contains: Boolean = false;
+        newJumps.forEach(newJump => 
+        {
+           if(oldJump[0] == newJump[0] && oldJump[1] == newJump[1])
+           {
+                contains = true;
+           }
+        });
+
+        if(contains == false)
+        {
+            console.log("deleting jump " + oldJump); // ! DEBUG
+            deletedJumps.push(oldJump);
+        }
+    });
+
+    addedJumps.forEach(addedJump => {
+        console.log("added jump"); // ! DEBUG
+        connectNodes(addedJump[0], addedJump[1]);
+    });
+
+    deletedJumps.forEach(deletedJump => {
+        console.log("removed jump"); // ! DEBUG
+        removeJump(deletedJump[0], deletedJump[1]);
+    });
+    */
+
 }
 
 /**
  * Delete jumps
- * 
- */
+ * Should just be get([from,to]).destroy();
+ * delete([from,to]);
+ */
+function removeJump(from: number, to: number){
+
+    jumpMap.delete([from, to]);
+    jumpMap.forEach((value, key) =>
+    {
+        if(key[0] == from && key[1] == to){
+            value.destroy();
+        }
+    });
+}