graph: automatic resizing of the map

frontend/src/Editor.svelte

@@ -108,6 +108,7 @@
     margin: 0;
     height: 50%;
     background-color: aqua;
+    overflow-y: auto;
   }
 
   .lastClicked {
@@ -143,7 +144,6 @@
     </div>
     <div class="taskDetails">
       {#if currentTask != null}
-        start
         <h3>{currentTask}</h3>
         <span>{taskMap.get(currentTask).comment}</span>
         <ul>

frontend/src/Graph.svelte

@@ -6,15 +6,21 @@
   import { createLinksFromTaskMap } from "./task-loader";
   import type { TasksFile, TaskDescriptor } from "./task-loader";
 
-  const eventDispatcher = createEventDispatcher();
-
   export let tasks: TasksFile;
   export let selectedTask: null | string = null;
   export let repulsionForce: number = -600;
 
+  // Svelte automatically fills these with a reference
+  let container: HTMLElement;
+  let clientHeight: number;
+  let clientWidth: number;
+  let svgElement: SVGElement;
+
   $: nodes = tasks.tasks;
   $: edges = createLinksFromTaskMap(tasks);
 
+  const eventDispatcher = createEventDispatcher();
+
   const nodeClick = (task: TaskDescriptor) => (e: CustomEvent<MouseEvent>) => {
     selectedTask = task.id;
     eventDispatcher("selectTask", task);
@@ -30,9 +36,6 @@
     }
   };
 
-  // Svelte automatically fills this with a reference
-  let container: HTMLElement;
-
   function runSimulation() {
     // Let's list the force we wanna apply on the network
     let simulation = d3
@@ -59,38 +62,29 @@
     }
   }
 
-  // run on create
+  // start simulation and center view on create
   onMount(() => {
-    // set the dimensions and margins of the graph
+    // set center of the SVG at (0,0)
-      const width = container.clientWidth;
+    let svg = d3
-      const height = container.clientHeight;
+      .select(svgElement)
-
+      .attr("viewBox", [
-    // resize the svg object
+        -clientWidth / 2,
-    var svg = d3
+        -clientHeight / 2,
-      .select(container)
+        clientWidth,
-      .select("svg")
+        clientHeight,
-      .attr("width", width)
+      ])
-      .attr("height", height)
-      .attr("viewBox", [-width / 2, -height / 2, width, height])
       .select("g");
 
+    // setup zoom
     function zoomed(e) {
-      let { transform } = e;
+      svg.attr("transform", e.transform);
-      svg.attr("transform", transform);
     }
-
+    let zoomer = d3.zoom().scaleExtent([0.1, 2]).on("zoom", zoomed);
-    d3.select(container).call(
+    d3.select(container).call(zoomer);
-      d3
-        .zoom()
-        .scaleExtent([0.1, 2])
-        .on("zoom", zoomed)
-    );
-
-    runSimulation();
   });
 
   // don't forget to vomit 🤮🤢
-  export let runSimulationWeirdHack: boolean = true;
+  export let runSimulationWeirdHack: boolean = false;
   $: {
     runSimulationWeirdHack;
     runSimulation();
@@ -105,8 +99,8 @@
   }
 </style>
 
-<div bind:this={container}>
+<div bind:this={container} bind:clientHeight bind:clientWidth>
-  <svg>
+  <svg bind:this={svgElement}>
     <g>
       {#each edges as edge}
         <GraphEdge {edge} />