diff --git a/frontend/src/Graph.svelte b/frontend/src/Graph.svelte
index 2066c39..a0d5c61 100644
--- a/frontend/src/Graph.svelte
+++ b/frontend/src/Graph.svelte
@@ -6,6 +6,7 @@
import type { TasksFile, TaskDescriptor } from "./tasks";
import { createEdges } from "./tasks";
import { taskStatuses } from "./task-status-cache";
+import { isEditableElement } from "./helpers";
export let tasks: TasksFile;
export let nodeDraggingEnabled: boolean = false;
@@ -69,14 +70,44 @@
/**
* Make the SVG drag&zoomable
**/
+ let currentZoomScale = 1.0
+ const zoomer = d3.zoom().scaleExtent([0.1, 2]).clickDistance(10);
function setupZoom() {
function zoomed(e) {
let svg = d3.select(svgElement).select("g");
+ currentZoomScale = e.transform.k
svg.attr("transform", e.transform);
}
- const zoomer = d3.zoom().scaleExtent([0.1, 2]).clickDistance(10);
zoomer.on("zoom", zoomed);
- d3.select(container).call(zoomer);
+ const selection = d3.select(container) as any
+ selection.call(zoomer);
+ }
+
+ function keydown(key: KeyboardEvent) {
+ if (isEditableElement(document.activeElement)) {
+ // another element has focus - ignore our shortcuts
+ return
+ }
+
+ const selection = d3.select(container) as any
+ const c = 60 / currentZoomScale
+
+ if (key.key == "ArrowLeft" || key.key == "a") {
+ zoomer.translateBy(selection, c, 0)
+ }
+ else if (key.key == "ArrowRight" || key.key == "d") {
+ zoomer.translateBy(selection, -c, 0)
+ }
+ else if (key.key == "ArrowUp" || key.key == "w") {
+ zoomer.translateBy(selection, 0, c)
+ }
+ else if (key.key == "ArrowDown" || key.key == "s") {
+ zoomer.translateBy(selection, 0, -c)
+ } else if (key.key == "+") {
+ zoomer.scaleBy(selection, 1.2)
+ } else if (key.key == "-") {
+ zoomer.scaleBy(selection, 1/1.2)
+ }
}
function containerClickHandler(e: MouseEvent) {
@@ -267,6 +298,8 @@
}
+