From 73f8966ea1750593dec98ae3f70b4a02844f2687 Mon Sep 17 00:00:00 2001 From: exyi Date: Mon, 28 Sep 2020 22:44:29 +0000 Subject: [PATCH] More hack and few more hack so zoom works fix #2 --- frontend/src/Graph.svelte | 34 +++++++++++++++++++++------------- 1 file changed, 21 insertions(+), 13 deletions(-) diff --git a/frontend/src/Graph.svelte b/frontend/src/Graph.svelte index a164296..8c8d566 100644 --- a/frontend/src/Graph.svelte +++ b/frontend/src/Graph.svelte @@ -6,6 +6,7 @@ import type { TasksFile, TaskDescriptor } from "./task-loader"; import { createNodesAndEdges } from "./graph-types"; import { taskForce } from "./task-force"; + import { zoom } from "d3"; export let tasks: TasksFile; let hoveredTask: null | string = null; @@ -73,17 +74,22 @@ nodes = nodes; } } + const zoomer = d3.zoom().scaleExtent([0.1, 2]) + + $: { + // zoomer.extent([[-clientWidth / 2,-clientHeight / 2],[clientWidth,clientHeight]]) + } // start simulation and center view on create onMount(() => { // set center of the SVG at (0,0) - let svg = d3.select(svgElement) + let svg = d3.select(svgElement).select("g") // setup zoom function zoomed(e) { svg.attr("transform", e.transform); } - let zoomer = d3.zoom().scaleExtent([0.1, 2]).on("zoom", zoomed); + zoomer.on("zoom", zoomed); d3.select(container).call(zoomer); runSimulation(); @@ -112,18 +118,20 @@
- + console.log(d3.pointer(e))}> - {#each edges as edge} - - {/each} - {#each nodes as task} - - {/each} + + {#each edges as edge} + + {/each} + {#each nodes as task} + + {/each} +