Mark nodes as selected with arrows

FeniXb3 · Aug 1, 2023 · 8f81156 · 8f81156
1 parent 0d1ee2f
commit 8f81156
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 6 deletions.
diff --git a/public/Alakazam.js b/public/Alakazam.js
@@ -605,6 +605,18 @@ export class Alakazam {
                 this.nodeTypeMenu.hide();
                 this.hideAlert();
             }
+            else if (event.key == "ArrowDown") {
+                this.flowchart.selectNextNode();
+            }
+            else if (event.key == "ArrowLeft") {
+                this.flowchart.selectNextNode("left");
+            }
+            else if (event.key == "ArrowRight") {
+                this.flowchart.selectNextNode("right");
+            }
+            else if (event.key == "ArrowUp") {
+                this.flowchart.selectPreviousNode();
+            }
         });
 
         // this.workspace.addEventListener('mousedown', event => {

diff --git a/public/Flowchart.js b/public/Flowchart.js
@@ -6,6 +6,35 @@ import { Alakazam } from "./Alakazam.js";
 export class Flowchart {
     constructor() {
         this.nodes = [];
+        this.selectedNode = null;
+        this.selectionHistory = [];
+    }
+
+    selectNextNode(direction) {
+        if (!this.selectedNode) {
+            const startingNodes = this.nodes.filter(n => n.type == 'start');
+
+            this.selectedNode = startingNodes[0];
+            this.selectedNode.markAsSelected();
+        }
+        else if (this.selectedNode.connections.length == 1 || direction == "left") {
+            this.selectionHistory.push(this.selectedNode);
+            this.selectedNode.markAsUnselected();
+            this.selectedNode = this.selectedNode.connections[0].target;
+            this.selectedNode.markAsSelected();
+        }
+        else if (direction == "right") {
+            this.selectionHistory.push(this.selectedNode);
+            this.selectedNode.markAsUnselected();
+            this.selectedNode = this.selectedNode.connections[1].target;
+            this.selectedNode.markAsSelected();
+        }
+    }
+
+    selectPreviousNode() {
+        this.selectedNode.markAsUnselected();
+        this.selectedNode = this.selectionHistory.pop();
+        this.selectedNode.markAsSelected();
     }
 
     addNode(description, type) {

diff --git a/public/Node.js b/public/Node.js
@@ -160,17 +160,33 @@ export class Node {
     }
 
     markAsActive() {
-        const nodeElement = document.querySelector(`[id*=flowchart-${this.id}]`);
-        nodeElement.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
-        nodeElement.classList.add('active-node');
+        this.markAs('active-node');
     }
 
     markAsUsed() {
-        const nodeElement = document.querySelector(`[id*=flowchart-${this.id}]`);
+        this.markAs('used-node').classList.remove('active-node');
+    }
+
+    markAsSelected() {
+        this.markAs('selected-element');
+    }
+
+    markAsUnselected() {
+        this.getNodeElement().classList.remove('selected-element');
+    }
+
+    getNodeElement() {
+        return document.querySelector(`[id*=flowchart-${this.id}]`);
+    }
+
+    markAs(roleClass) {
+        const nodeElement = this.getNodeElement();
         nodeElement.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
-        nodeElement.classList.remove('active-node');
-        nodeElement.classList.add('used-node');
+        nodeElement.classList.add(roleClass);
+
+        return nodeElement;
     }
+
     static highlightLanguage = "csharp";
 
     static getHighlightTagOpening() {

diff --git a/public/style.css b/public/style.css
@@ -161,6 +161,16 @@ svg div:hover {
     stroke: forestgreen !important;
 }
 
+
+#theGraph .selected-element rect, 
+#theGraph .selected-element circle, 
+#theGraph .selected-element ellipse, 
+#theGraph .selected-element polygon,
+#theGraph .selected-element path {
+    fill: rgb(233, 97, 203) !important;
+    stroke: rgb(87, 0, 95) !important;
+}
+
 #theGraph {
     max-width: fit-content !important;
     max-height: fit-content !important;