Add navigation and zoom functionality to control addin

Dependency-Graph/src/ControlAddinViewer/MarkdownViewerANJ.ControlAddin.al

@@ -1,6 +1,3 @@
-/// <summary>
-/// ControlAddIn "MarkdownViewer_ANJ."
-/// </summary>
 namespace ANJ.Tools.Graph;
 controladdin MarkdownViewer_ANJ
 {
@@ -12,14 +9,11 @@
     StyleSheets = 'src\ControlAddinViewer\Style.css';
     VerticalShrink = true;
 
-    /// <summary>
-    /// Ready.
-    /// </summary>
     event Ready();
 
-    /// <summary>
-    /// Draw.
-    /// </summary>
-    /// <param name="Markdown">Text.</param>
-    procedure Draw(Markdown: Text)
-}
+    procedure Draw(Markdown: Text);
+
+    procedure Navigate(Direction: Text);
+
+    procedure Zoom(Level: Integer);
+}

Dependency-Graph/src/ControlAddinViewer/Scripts.js

@@ -16,4 +16,38 @@ function Draw(Markdown) {
     catch (e) {
         console.log(e);
     }
-}
+}
+
+function Navigate(Direction) {
+    try {
+        const container = document.getElementById('controlAddIn');
+        switch (Direction) {
+            case 'up':
+                container.scrollBy(0, -100);
+                break;
+            case 'down':
+                container.scrollBy(0, 100);
+                break;
+            case 'left':
+                container.scrollBy(-100, 0);
+                break;
+            case 'right':
+                container.scrollBy(100, 0);
+                break;
+        }
+    }
+    catch (e) {
+        console.log(e);
+    }
+}
+
+function Zoom(Level) {
+    try {
+        const container = document.getElementById('controlAddIn');
+        const currentZoom = parseFloat(container.style.zoom) || 1;
+        container.style.zoom = currentZoom + Level * 0.1;
+    }
+    catch (e) {
+        console.log(e);
+    }
+}

Dependency-Graph/src/ControlAddinViewer/Start.js

@@ -1,3 +1,45 @@
 HTMLContainer = document.getElementById("controlAddIn");
 mermaid.initialize({ startOnLoad: false });
-Microsoft.Dynamics.NAV.InvokeExtensibilityMethod("Ready", []);
+Microsoft.Dynamics.NAV.InvokeExtensibilityMethod("Ready", []);
+
+document.addEventListener('keydown', function(event) {
+    switch (event.key) {
+        case 'ArrowUp':
+            Navigate('up');
+            break;
+        case 'ArrowDown':
+            Navigate('down');
+            break;
+        case 'ArrowLeft':
+            Navigate('left');
+            break;
+        case 'ArrowRight':
+            Navigate('right');
+            break;
+        case '+':
+            Zoom(1);
+            break;
+        case '-':
+            Zoom(-1);
+            break;
+    }
+});
+
+document.addEventListener('wheel', function(event) {
+    if (event.ctrlKey) {
+        event.preventDefault();
+        Zoom(event.deltaY < 0 ? 1 : -1);
+    }
+});
+
+document.addEventListener('mousedown', function(event) {
+    if (event.button === 1) {
+        document.body.classList.add('zooming');
+    }
+});
+
+document.addEventListener('mouseup', function(event) {
+    if (event.button === 1) {
+        document.body.classList.remove('zooming');
+    }
+});

Dependency-Graph/src/ControlAddinViewer/Style.css

@@ -8,4 +8,22 @@ iframe {
     word-wrap: break-word;
     padding-left: 1%;
     padding-right: 1;
-}
+}
+
+.navigation-controls {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 1000;
+}
+
+.zoom-controls {
+    position: absolute;
+    top: 50px;
+    right: 10px;
+    z-index: 1000;
+}
+
+.zooming {
+    background-color: rgba(0, 0, 0, 0.1);
+}