web accessibility feature introduced

lib/network/modules/components/NavigationHandler.js

@@ -3,6 +3,12 @@ import "./NavigationHandler.css";
 import { Hammer } from "vis-util/esnext";
 import { onRelease, onTouch } from "../../../hammerUtil";
 import keycharm from "keycharm";
+import LayoutEngine from "../../modules/LayoutEngine";
+import NodesHandler from "../../modules/NodesHandler";
+import Canvas from "../../modules/Canvas";
+import SelectionHandler from "../SelectionHandler";
+import Images from "../../Images";
+import { Groups } from "../../modules/Groups";
 
 /**
  * Navigation Handler
@@ -21,6 +27,18 @@ class NavigationHandler {
     this.boundFunctions = {};
     this.touchTime = 0;
     this.activated = false;
+    this.selectionHandler = new SelectionHandler(body, canvas);
+    this.images = new Images(() => this.body.emitter.emit("_requestRedraw")); // object with images
+    this.groups = new Groups(); // object with groups
+    this.layoutEngine = new LayoutEngine(this.body); // layout engine for inital layout and hierarchical layout
+    this.nodesHandler = new NodesHandler(
+      this.body,
+      this.images,
+      this.groups,
+      this.layoutEngine
+    ); // Handle adding, deleting and updating of nodes as well as global options
+    this.canvas = new Canvas(body);
+    this.index = -1;
 
     this.body.emitter.on("activate", () => {
       this.activated = true;
@@ -307,6 +325,89 @@ class NavigationHandler {
       this.keycharm.reset();
 
       if (this.activated === true) {
+        this.keycharm.bind(
+          "n",
+          () => {
+            this.index += 1;
+            if (this.index >= this.body.nodeIndices.length) {
+              this.index = 0;
+            }
+            this.selectionHandler.selectNodes([
+              this.body.nodeIndices[this.index],
+            ]);
+          },
+          "keydown"
+        );
+        this.keycharm.bind(
+          "p",
+          () => {
+            this.index -= 1;
+            if (this.index < 0) {
+              this.index = this.body.nodeIndices.length - 1;
+            }
+            this.selectionHandler.selectNodes([
+              this.body.nodeIndices[this.index],
+            ]);
+          },
+          "keydown"
+        );
+        this.keycharm.bind(
+          "s",
+          () => {
+            const nodeId = this.selectionHandler.getSelectedNodeIds()[0];
+            const canvasPosition = this.nodesHandler.getPosition(nodeId);
+            const DOMPosition = this.canvas.canvasToDOM(canvasPosition);
+            this.selectionHandler.generateClickEvent(
+              "click",
+              {
+                center: {
+                  x: Math.floor(DOMPosition.x),
+                  y: Math.floor(DOMPosition.y),
+                },
+              },
+              { x: DOMPosition.x, y: DOMPosition.y }
+            );
+          },
+          "keydown"
+        );
+        this.keycharm.bind(
+          "d",
+          () => {
+            const nodeId = this.selectionHandler.getSelectedNodeIds()[0];
+            const canvasPosition = this.nodesHandler.getPosition(nodeId);
+            const DOMPosition = this.canvas.canvasToDOM(canvasPosition);
+            this.selectionHandler.generateClickEvent(
+              "doubleClick",
+              {
+                center: {
+                  x: Math.floor(DOMPosition.x),
+                  y: Math.floor(DOMPosition.y),
+                },
+              },
+              { x: DOMPosition.x, y: DOMPosition.y }
+            );
+          },
+          "keydown"
+        );
+        this.keycharm.bind(
+          "c",
+          () => {
+            const nodeId = this.selectionHandler.getSelectedNodeIds()[0];
+            const canvasPosition = this.nodesHandler.getPosition(nodeId);
+            const DOMPosition = this.canvas.canvasToDOM(canvasPosition);
+            this.selectionHandler.generateClickEvent(
+              "oncontext",
+              {
+                center: {
+                  x: Math.floor(DOMPosition.x),
+                  y: Math.floor(DOMPosition.y),
+                },
+              },
+              { x: DOMPosition.x, y: DOMPosition.y }
+            );
+          },
+          "keydown"
+        );
         this.keycharm.bind(
           "up",
           () => {