From a189823cba61eb736fa257b3302e7c3f75d02370 Mon Sep 17 00:00:00 2001
From: Carrie Hanscom <CHanscom7@gmail.com>
Date: Thu, 12 Dec 2024 13:12:48 -0500
Subject: [PATCH] LEAF 4597 updates to coord tracking and after move paint

---
 LEAF_Nexus/js/ui/position.js    |  3 +-
 LEAF_Nexus/templates/editor.tpl | 61 ++++++++++++++++-----------------
 2 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/LEAF_Nexus/js/ui/position.js b/LEAF_Nexus/js/ui/position.js
index a4a956f5b..3fb289027 100644
--- a/LEAF_Nexus/js/ui/position.js
+++ b/LEAF_Nexus/js/ui/position.js
@@ -47,7 +47,8 @@ position.prototype.initialize = function (parentContainerID) {
   $("#" + prefixedPID + "_title").on("click keydown mouseenter", function(ev) {
     //if they are newly focusing an open card just update the tab focus
     const isNewFocus = document.activeElement !== ev.currentTarget;
-    if (ev.type === "click" && isNewFocus) {
+    const cardDataAttr = ev.currentTarget.parentNode.getAttribute('data-moving');
+    if (ev.type === "click" && isNewFocus || cardDataAttr === "true") {
       ev.currentTarget.focus();
       return;
     }
diff --git a/LEAF_Nexus/templates/editor.tpl b/LEAF_Nexus/templates/editor.tpl
index edf443fba..028c54b3c 100644
--- a/LEAF_Nexus/templates/editor.tpl
+++ b/LEAF_Nexus/templates/editor.tpl
@@ -155,7 +155,7 @@ function viewSupervisor() {
     });
 }
 
-function saveLayout(positionID) {
+function saveLayout(positionID, repaint = false) {
     const position = $('#' + positions[positionID].getDomID()).offset();
     let newPosition = new Object();
     newPosition.x = parseInt(position.left);
@@ -174,6 +174,9 @@ function saveLayout(positionID) {
                 if (+res === 1) {
                     positions[positionID].x = newPosition.x;
                     positions[positionID].y = newPosition.y;
+                    if(repaint === true) {
+                        jsPlumb.repaintEverything();
+                    }
                 }
                 $('#busyIndicator').css('visibility', 'hidden');
             },
@@ -280,17 +283,26 @@ function addSupervisor(positionID) {
 }
 
 function moveCoordinates(prefix, position) {
+    let card = document.getElementById(prefix + position);
+    const cardStyle = window.getComputedStyle(card);
+    const originalTopOrg = cardStyle.getPropertyValue('top');
+    const originalLeftOrg = cardStyle.getPropertyValue('left');
+
     const moveCard = (e) => {
         if (e.key === "Tab") {
-            saveLayout(position);
+            saveLayout(position, true);
             $('#' + prefix + position).css('box-shadow', 'none');
             $('#visual_alert_box').addClass('hide');
             document.removeEventListener('keydown', moveCard);
             return;
         } else if (controlKeys.includes(e.key)) {
             e.preventDefault();
+            const cardStyle = window.getComputedStyle(card);
+            const topValue = Number(cardStyle.getPropertyValue('top').replace("px", ""));
+            const leftValue = Number(cardStyle.getPropertyValue('left').replace("px", ""));
             //only show extra info if keyboard is being used to move the card
             if(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
+                card.setAttribute("data-moving", "true");
                 if( $('#visual_alert_box_container label').hasClass('hide')) {
                     $('#visual_alert_box_container label').removeClass('hide');
                     $('#visual_alert_box').removeClass('hide');
@@ -299,43 +311,35 @@ function moveCoordinates(prefix, position) {
                         $('#visual_alert_box').removeClass('hide');
                     }
                 }
+            } else {
+                card.removeAttribute("data-moving");
             }
             switch (e.key) {
                 case "ArrowLeft":
-                    leftValue = (Number(leftValue) - 10);
-                    card.style.left = leftValue + "px";
+                    card.style.left = leftValue - 10 + "px";
                     break;
                 case "ArrowRight":
-                    leftValue = (Number(leftValue) + 10);
-                    card.style.left = leftValue + "px";
+                    card.style.left = leftValue + 10 + "px";
                     break;
                 case "ArrowUp":
-                    topValue = (Number(topValue) - 10);
-                    card.style.top = topValue + "px";
+                    card.style.top = topValue - 10 + "px";
                     break;
                 case "ArrowDown":
-                    topValue = (Number(topValue) + 10);
-                    card.style.top = topValue + "px";
+                    card.style.top = topValue + 10 + "px";
                     break;
                 case "Enter":
                     // save the coordinates as they are now
-                    saveLayout(position);
-                    abort = true;
+                    saveLayout(position, true);
                     break;
                 case "Escape":
                     // revert coordinates back to original
-                    card.style.top = topOrg;
-                    card.style.left = leftOrg;
-                    abort = true;
+                    card.style.top = originalTopOrg;
+                    card.style.left = originalLeftOrg
+                    $('#' + prefix + position).css('box-shadow', 'none');
+                    $('#visual_alert_box').addClass('hide');
+                    document.removeEventListener('keydown', moveCard);
                     break;
             }
-
-            if (abort) {
-                $('#' + prefix + position).css('box-shadow', 'none');
-                $('#visual_alert_box').addClass('hide');
-                document.removeEventListener('keydown', moveCard);
-                return;
-            }
         }
     };
     $('div.positionSmall').css('box-shadow', 'none');
@@ -345,17 +349,12 @@ function moveCoordinates(prefix, position) {
     let titleText = title.innerHTML;
     alert_box_card_title.textContent = titleText;
 
-    let card = document.getElementById(prefix + position);
-    let cardStyle = window.getComputedStyle(card);
-    let topOrg = cardStyle.getPropertyValue('top');
-    let leftOrg = cardStyle.getPropertyValue('left');
-    let topValue = cardStyle.getPropertyValue('top').replace("px", "");
-    let leftValue = cardStyle.getPropertyValue('left').replace("px", "");
-    let key;
-    let abort = false;
     const controlKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Enter', 'Escape'];
     document.addEventListener('keydown', moveCard);
-    title.addEventListener('blur', () => document.removeEventListener('keydown', moveCard));
+    title.addEventListener('blur', () => {
+        card.removeAttribute("data-moving");
+        document.removeEventListener('keydown', moveCard)
+    });
 }
 
 function addSubordinate(parentID) {